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