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 NgxDatesPickerModule into your application.

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

@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

1. Clone this repository

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

2. Install packages

npm install

3. Run Demo

npm start

Licence

MIT