Wondering what’s next for npm?Check out our public roadmap! »

    ng-pick-daterange
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Angular Date Range Picker

    Angular date range picker - Angular reusable UI component

    Description

    Simple Angular date range picker. Online demo is here. This picker is responsive design, so feel free to try it in your desktops, tablets and mobile devices. This picker uses javascript library date-fns

    Installation

    To install this component, follow the procedure:

    1. Install with npm:npm install ng-pick-daterange --save
    2. Add DateRangePickerModule import to your @NgModule like example below
      import { NgModule } from '@angular/core';
      import { BrowserModule } from '@angular/platform-browser';
      import { MyTestApp } from './my-test-app';
       
      import { DateRangePickerModule } from 'ng-pick-daterange';
       
      @NgModule({
          imports:      [ BrowserModule, DateRangePickerModule ],
          declarations: [ MyTestApp ],
          bootstrap:    [ MyTestApp ]
      })
      export class MyTestAppModule {}
    3. If you are using systemjs package loader add the following dateRangePicker properties to the System.config:
      (function (global) {
          System.config({
              paths: {
                  'npm:': 'node_modules/'
              },
              map: {
                  // Other components are here...
       
                  'ng-pick-daterange': 'npm:ng-pick-daterange',
              },
              packages: {
                  // Other components are here...
       
                  // the picker
                  'ng-pick-daterange': {
                      main: 'index.js',
                      defaultExtension: 'js'
                  },
              }
          });
      })(this);

    Usage

    Use the following snippet inside your template. For example:

    <app-date-range [(dateRange)]="dateRange"></app-date-range>

    Or:

    <app-date-range [dateRange]="dateRange" (dateRangeChange)="setReturnValue($event)"></app-date-range>
    public setReturnValue(dateRangeIDateRange)any {
        this.dateRange = dateRange;
        // Do whatever you want to the return object 'dateRange'
    }

    Demo

    Online demo is here

    License

    • License: MIT

    Author

    • Author: Daniel Pan

    Install

    npm i ng-pick-daterange

    DownloadsWeekly Downloads

    12

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar