ng2-datepicker-inline
v0.0.3
Published
Angular 2+ Simple and minimal datepicker component
Downloads
7
Readme
ng2-datepicker-inline
Angular 2+ Simple and minimal datepicker component
Installation
- Install package from
npm
.
npm install ng2-datepicker-inline --save
- Include NgDatepickerModule into your application.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgDatepickerModule } from 'ng2-datepicker-inline';
@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'
};
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