@sanmanto-sds/ngx-daterangepicker-material v1.0.3

ngx-daterangepicker-material

Angular 17+ Date range picker.

This Angularl plugin is compatible with Angular 17. It leverages dayjs to handle date manipulation and parsing. The base for this plugin was originally the Bootstrap Date Range Picker, but its dependencies on jQuery, Bootstrap and dayjs.js were removed.

Versions

Installation

Install the plugin from npm:

npm i @sanmanto-sds/ngx-daterangepicker-material .

import NgxDaterangepickerMd in your module:

...
import { FormsModule } from '@angular/forms';
import { NgxDaterangepickerMd } from '@sanmanto-sds/ngx-daterangepicker-material';
import { App } from './app';

@NgModule({
  imports: [
    FormsModule,
    NgxDaterangepickerMd.forRoot()
  ],
  declarations: [App],
  bootstrap: [App]
})

export class AppModule {
}

or add it in your app.config.ts file for standalone usage

...
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { NgxDaterangepickerMd } from '@sanmanto-sds/ngx-daterangepicker-material';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom([
      NgxDaterangepickerMd.forRoot(),
    ]),
  ],
};

Usage example

Html:

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

Typescript:

selected: {
  startDate: Dayjs, endDate
:
  Dayjs
}
;

with some options:

Html:

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

Typescript:

selected: {
  start: Dayjs,
    end
:
  Dayjs,
}
;

Inline usage

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>

Available options

Global locale

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

eg:

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

or for standalone:

...
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { NgxDaterangepickerMd } from '@sanmanto-sds/ngx-daterangepicker-material';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom([
      NgxDaterangepickerMd.forRoot({
        separator: ' - ',
        applyLabel: 'Okay',
      }),
    ]),
  ],
};

Available locale options

you can also use locale like an object in props:

export class myComponent {
  locale = {
    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',
    daysOfWeek: dayjs.weekdaysMin(),
    monthNames: dayjs.monthsShort(),
    firstDay: 1 // first day is monday
  }
}

Theming

You can pass the theme object to NgxDaterangepickerMd.forRoot() for changing theme variables.

For example:

@NgModule({
  imports: [
    FormsModule,
    NgxDaterangepickerMd.forRoot({}, {
      color: '#0a0a0a',
      bgColor: '#fafafa',
      width: '300px',
    }),
  ],
  declarations: [App],
  bootstrap: [App],
})

or for standalone:

...
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { NgxDaterangepickerMd } from '@sanmanto-sds/ngx-daterangepicker-material';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom([
      NgxDaterangepickerMd.forRoot({}, {
        color: '#0a0a0a',
        bgColor: '#fafafa',
        width: '300px',
      }),
    ]),
  ],
};

Available theme options

Props that can be passed to component

Available events

Open datepicker from outside

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
  ngxDaterangepickerMd
  [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>

...
@ViewChild(DaterangepickerDirective, { static: false })
pickerDirective
:
DaterangepickerDirective;
...
...
openDatepicker()
{
  this.pickerDirective.open();
}

Development

Prepare your environment

Install local dependencies: npm install.

Development server

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

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

License

MIT