README

datepicker

Angular 2+ Simple and minimal datepicker component, added support for Angular 9 (Forked from bleenco/ng2-datepicker)

Installation

Install package from npm.

npm install @mksasi/datepicker --save

Include NgDatepickerModule into your application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgDatepickerModule } from 'ng2-datepicker';

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

Example

  <ng-datepicker [(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 { DatepickerOptions } from 'ng2-datepicker';
import * as frLocale from 'date-fns/locale/fr';

options: DatepickerOptions = {
  minYear: 1970,
  maxYear: 2030,
  displayFormat: 'MMM D[,] YYYY',
  barTitleFormat: 'MMMM YYYY',
  dayNamesFormat: 'dd',
  firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
  locale: frLocale,
  minDate: new Date(Date.now()), // Minimal selectable date
  maxDate: new Date(Date.now()),  // Maximal selectable date
  barTitleIfEmpty: 'Click to select a date',
  placeholder: 'Click to 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>
  useEmptyBarTitle: false, // 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.

Run Included Demo

Clone this repository

git clone https://github.com/jkuri/ng2-datepicker.git
cd ng2-datepicker

Install packages

npm install

Run Demo

npm start

Licence

MIT

Usage no npm install needed!