Skip to content

leonardodimarchi/ngx-dates-picker-calendar

 
 

Repository files navigation

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
  1. 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
  1. Install packages
npm install
  1. Run Demo
npm start

Licence

MIT

Languages

  • TypeScript 66.9%
  • HTML 16.6%
  • Sass 10.0%
  • JavaScript 5.8%
  • SCSS 0.7%