Megamtech Daterange picker for angular 6+.

This Megamtech Daterange picker plugin is compatible with Angular 6+ and is Ivy compatible. It leverages date-fns to handle date manipulation and parsing.

Install the plugin from npm:

npm i @megamtech-labs/ngx-datepicker --save .

import ngxDaterangepicker in your module:

...
import { FormsModule } from '@angular/forms';
import { ngxDaterangepicker } from '@megamtech-labs/ngx-datepicker';
import { App } from './app';

@NgModule({
    imports: [
        ... ,
        FormsModule,
       ngxDaterangepicker.forRoot({
      applyLabel: 'Okay',
      firstDay: 3
    })
    ],
    declarations: [App],
    bootstrap:    [App]
})
export class AppModule {}

Html:

<input type="text" ngxDaterangepicker [(ngModel)]="selected" class="form-control"/>

Typescript:

selected: {startDate: startOfDay(new Date()), endDate: endOfDay(new Date())};

Html:

<input type="text" matInput
    ngxDaterangepicker
    [locale]="{applyLabel: 'ok', format: 'DD-MM-YYYY'}"
    startKey="start"
    endKey="end"
    [(ngModel)]="selected"
    name="daterange"/>

Typescript:

selected: {startDate: startOfDay(new Date()), endDate: endOfDay(new Date())};

You can use the component directly in your templates, which will set its inline mode to true, in which case the calendar won't hide after date/range selection. You can then use the events: rangeClicked or datesUpdated or choosedDate to get its selection state.

<ngx-daterangepicker-material (choosedDate)="choosedDate($event)">
</ngx-daterangepicker-material>

These options are booleans

(function) A function that is passed each date in the calendars before they are displayed, and may return a string or array of CSS class names to apply to that date's calendar cell

(function) A function that is passed each date in the two calendars before they are displayed, and may return true or false to indicate whether that date should be available for selection or not.

(function) A function that is passed each date in the two calendars before they are displayed, and may return a text to be displayed as a tooltip.

To set the minimal and maximal date, these options are a moment date

To set max number of the date we can choose

the locale options is an object with:

{
    format: 'MM/DD/YYYY', // could be 'YYYY-MM-DDTHH:mm:ss.SSSSZ'
    displayFormat: 'MM/DD/YYYY', // default is format value
    direction: 'ltr', // could be rtl
    weekLabel: 'W',
    separator: ' To ', // default is ' - '
    cancelLabel: 'Cancel', // detault is 'Cancel'
    applyLabel: 'Okay', // detault is 'Apply'
    clearLabel: 'Clear', // detault is 'Clear'
    customRangeLabel: 'Custom range',
    firstDay: 1 // first day is monday
}

Theses 2 options are for the key you want for the value, default are startDate and endDate, it means the value we have from ngModel are: {startDate: Date, endDate: Date} by default;

Specifiyng startKey and endKey would have different model:

example:

<input type="text" ngxDaterangepicker startKey="start" endKey="end" [(ngModel)]="model">

the model we got would be: {start: Date, end: Date}

(object) Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range. As an example:

<input type="text" ngxDaterangepicker startKey="start" endKey="end" [ranges]="ranges" [(ngModel)]="model">

ranges: any = [
    { label: 'Today', start: startOfDay(new Date()), end: endOfDay(new Date()) },
    { label: 'Yesterday', start: startOfDay(sub(new Date, { 'days': 1 })),
     end: endOfDay(sub(new Date, { 'days': 1 })) },
    { label: 'Last 7 Days', start: startOfDay(sub(new Date, { 'days': 7 })), end: endOfDay(new Date()) },
    { label: 'Last 30 Days', start: startOfDay(sub(new Date, { 'days': 30 })), end: endOfDay(new Date()) },
    { label: 'This Month', start: startOfMonth(new Date), end: endOfDay(new Date()) },
    { label: 'Last Month', start: startOfMonth(sub(new Date, { months: 1 })),
     end: endOfMonth(sub(new Date, { months: 1 })) },
    { label: 'Last 3 Month', start: startOfMonth(sub(new Date, { months: 3 })), 
    end: endOfMonth(sub(new Date, { months: 1 })) }
]

You can use bellow options when using the ranges. The default are false.

It is possible to open datepicker from outside. You should create an input with attached datepicker directive and a button with "ngx-daterangepicker-action" class (to prevent triggering of clickOutside).

    <input
      ngxDaterangepicker
      [closeOnAutoApply]="true"
      [autoApply]="true"
      [singleDatePicker]="true"
      [linkedCalendars]="true"
      [(ngModel)]="selected"
      (datesUpdated)="datesUpdated($event)"
      class="datepicker-calendar-icon">

    <a class="ngx-daterangepicker-action" (click)="openDatepicker()">
      Open
    </a>

You have to set the attribute timePicker to true if you want to enable the timepicker.

You can use theses options:

Fired when clicked on range, and send an object with range label and dates value, eg: {label: 'This Month', dates: [Date, Date]}

Fires when the date model is updated, like applying (if you have activated the apply button), or when selecting a range or date without the apply button, and sends an object containing start and end dates, eg: {startDate: Date, endDate: Date}

For setting the global locale, pass this object to ngxDaterangepicker.forRoot().

eg:

@NgModule({
    imports: [
        ... ,
        FormsModule,
        ngxDaterangepicker.forRoot({
            separator: ' - ',
            applyLabel: 'Okay',
        })
    ],
    declarations: [App],
    bootstrap:    [App]
})

Install local dependencies: npm install.

Run npm start to start a development server on a port 4401.

Open http//:localhost:4401 on your browser.

Run npm test or ng test to run tests.

MIT