Skip to content

Angular 2+ datepicker component with no JQuery dependency.

License

Notifications You must be signed in to change notification settings

martre3/ngx-dates-picker

Repository files navigation

ngx-dates-picker

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

AbstruseCI

Installation

  1. Install package from npm.
npm install ngx-dates-picker --save
  1. 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
  1. Install packages
npm install
  1. Run Demo
npm start

Licence

MIT