README

ngx-dates-picker

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

Installation

Install package from npm.

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

Include NgxDatesPickerModule into your application.

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

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

Example

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

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

Clone this repository

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

Install packages

npm install

Run Demo

npm start

Licence

MIT

Usage no npm install needed!