ngx-dates-picker

Angular 2+ datepicker component with no JQuery dependency, forked from bleenco/ng2-datepicker.

Installation

1. Install package from npm.

npm install ngx-dates-picker --save

2. 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 true 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| | --- | --- | --- | --- | |headless|boolean|false|Disable datepicker's input| |isOpened|boolean|false|Show or hide datepicker| |position|string|bottom-right|Dropdown position (bottom-left, bottom-right, top-left, top-right, static)| |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 = {
  closeOnClickOutside: true;
  closeOnSelection: true;
  selectRange: false,
  includeDays: 'previous-month'; // 'none', 'previous-month', 'next-month', 'all'. Should it render days outside current month.
  minYear: 1970,
  maxYear: 2030,
  displayFormat: 'MMM D[,] YYYY',
  barTitleFormat: 'MMMM YYYY',
  dayNamesFormat: 'ddd',
  rangeSeparator: '-' // Char that separates start and end dates in input field.
  firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
  locale: {},
  minDate: undefined, // Minimal selectable date
  maxDate: undefined,  // Maximal selectable date
  barTitleIfEmpty: '',
  placeholder: '', // HTML input placeholder attribute (default: '')
  addClass: {}, // Optional, value to pass on to [ngClass] on the input field
  addStyle: {}, // Optional, value to pass to [ngStyle] on the input field
  fieldId: 'datepicker-0', // ID to assign to the input field. Defaults to datepicker-<counter>
  useEmptyBarTitle: true, // Defaults to true. If set to false then barTitleIfEmpty will be disregarded and a date will always be shown 
};

For available format options check out here.

In case you want to initialize with an empty value, just assign null to the model attribute you're storing the date and you can customize the message in the bar with the property barTitleIfEmpty.

Locale

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

To Do

1. Fix packages vulnerabilities.
2. Write tests (not a single test has been written yet).
3. Add ability to add custom class to each calendar component.

Run Included Demo

1. Clone this repository

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

2. Install packages

npm install

3. Run Demo

npm start

Licence

MIT