Ngx-moderndatepicker NPM

ngx-moderndatepicker

Angular 6+ Simple and interactive calender datepicker component

ngx-moderndatepicker

Installation

Install package from npm.

npm install ngx-moderndatepicker --save

Include NgModernDatepickerModule into your application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModernDatepickerModule } from 'ngx-moderndatepicker';

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

Example

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

Additional 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`)

Options

import { ModernDatePickerOptions } from 'ngx-moderndatepicker';
import * as enLocale from 'date-fns/locale/en';

options: ModernDatePickerOptions = {
  minYear: 1970,
  maxYear: 2030,
  displayFormat: 'MMM D[,] YYYY',
  dayNamesFormat: 'dd',
  monthNamesFormat: 'MMM',
  firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
  locale: enLocale,
  minDate: new Date(Date.now()), // Minimal selectable date
  maxDate: new Date(Date.now()),  // Maximal selectable date
  placeholder: 'Select A Date', // HTML input placeholder attribute (default: '')
  addClass: 'form-control', // Optional, value to pass on to [ngClass] on the input field
  addStyle: {}, // Optional, value to pass to [ngStyle] on the input field
  fieldId: 'my-date-picker', // ID to assign to the input field. Defaults to datepicker-<counter>
   weekendsDay: [0,6],
   /** Sunday is 0 , Highlights the weekends with gray background**/
  holidayList: [new Date('12/25/2000'), new Date('01/01/2001')]
  /** List of Holidays **/
};