ngx-dates-picker-calendar

Angular 2+ calendar datepicker component (With range select), forked from martre3/ngx-dates-picker.

Installation

1. Install package from npm.

npm install ngx-dates-picker-calendar --save

Angular	ngx-dates-picker-calendar
>=13.0.0 <14.0.0	v2.x
>=12.0.0 <13.0.0	v1.x

2. Include NgxDatesPickerCalendarModule into your application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxDatesPickerCalendarModule } from 'ngx-dates-picker-calendar';

@NgModule({
  imports: [
    BrowserModule,
    NgxDatesPickerCalendarModule
  ],
  declarations: [ AppComponent ],
  exports: [ AppComponent ]
})
export class AppModule {}

Example

  <ngx-dates-picker-calendar [(ngModel)]="date"></ngx-dates-picker-calendar>

NgModel

Accepted types are date string, javascript Date object and DateRange object ({start: Date, end: Date}). If selectRange is false, a javascript Date object will be returned for selected date, else - DateRange object, where range.start will be equal to range.end if one day is selected.

Attributes

Name	Type	Default	Description
previousMonthButtonTemplate	TemplateRef	undefined	Overrides left arrow used to go one month back.
nextMonthButtonTemplate	TemplateRef	undefined	Overrides right arrow used to go to next month.
options	object	see options

Options

defaultOptions: DatepickerOptions = {
  showNavigationIfMonthIsClicked: false,
  selectRange: true,
  includeDays: 'previous-month', // 'none', 'previous-month', 'next-month', 'all'. Should it render days outside current month.
  minYear: 1970,
  maxYear: 2030,
  barTitleFormat: 'MMMM yyyy',
  dayNamesFormat: 'EEEEE',
  firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
};

For available format options check out here.

Locale

To change the locale import it from date-fns. For example import { pt } from 'date-fns/locale' and pass it to options options={ locale: pt }.

Run Included Demo

1. Clone this repository

git clone https://github.com/leonardodimarchi/ngx-dates-picker-calendar.git
cd ngx-dates-picker-calendar

2. Install packages

npm install

3. Run Demo

npm start

Licence

MIT