Date Picker

This is a configurable date-picker build for Angular applications.
Supports latest (Angular 12) version. For older versions please checkout the CHANGELOG.md file.

DEMO

Screenshots

Day:

DayTime:

Month:

Time:

Installation:

1. Download from npm:
   npm install ng2-date-picker --save
2. Import the DpDatePickerModule module:
   import {DpDatePickerModule} from 'ng2-date-picker';
3. Add DpDatePickerModule to your module imports:

@NgModule({ ... imports: [ ... DpDatePickerModule ] })

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! �� [Become a backer]

Usage

Put the dp-date-picker component wherever you need it.

Attributes (Input):

Attributes (Output):

Configuration: In order to provide configurations to the date-picker you need to pass it to the dp-date-picker component:

<dp-date-picker [(ngModel)]="selectedDate" [config]="datePickerConfig"></dp-date-picker>

Here are the available configurations:

API:

In order to use the date-picker api user the @ViewChild annotation in the date-picker containing component class, take at the example below:
Container component:

import {DatePickerComponent} from 'ng2-date-picker';  
  
@Component({  
selector: 'my-container',  
template: `  
<div>  
 <h1>Container</h1> <dp-date-picker #dayPicker></dp-date-picker> <button (click)="open()"></button> <button (click)="close()"></button></div>  
`  
});  
class MyContainer {  
 @ViewChild('dayPicker') datePicker: DatePickerComponent;  
 open() { this.datePicker.api.open(); }  
 close() { this.datePicker.api.close(); }} ```  
  
If you want to use API with [`Directive`](#directive) - you can do it by using `#dateDirectivePicker`, like below:  
```ts  
import {Component, ViewChild} from '@angular/core';  
import {DatePickerDirective} from 'ng2-date-picker';  
  
@Component({  
selector: 'my-container',  
template: `  
<div>  
 <input #dateDirectivePicker="dpDayPicker"> <button (click)="close()"></button></div>  
`  
});  
class MyContainer {  
 @ViewChild('dateDirectivePicker') datePickerDirective: DatePickerDirective;     close() {  
 this.datePickerDirective.api.close(); }} ```  
  
Here is the list of APIs:    
  
| Name                 | Signature                          | Description                      |  
|----------------------|:----------------------------------:|----------------------------------|  
| open                 | `() => void`                       | Opens the date picker            |  
| close                | `() => void`                       | Closes the date picker           |  
| moveCalendarTo       | `(to: Moment \| String) => void`   | Moves calendar to specific date  |  
  
## Inline - Day Calendar  
  
You can use the `<dp-day-calendar>` component to display the calendar widget without an associated input box.  
  
i.e.  
```html  
<dp-day-calendar [(ngModel)]="selectedDate" [config]="config"></dp-day-calendar>

Attributes:

Attributes (Output):

Configuration: In order to provide configurations to the day-calendar you need to pass it to the dp-day-calendar component:

<dp-day-calendar [(ngModel)]="selectedDate" [config]="config"></dp-day-calendar>

Here are the available configurations:

Inline - Month Calendar

You can use the <dp-month-calendar> component to display the calendar widget without an associated input box.
i.e.

<dp-month-calendar [(ngModel)]="selectedDate" [config]="config"></dp-month-calendar>

Attributes:

Attributes (Output):

Configuration: In order to provide configurations to the month-calendar you need to pass it to the dp-month-calendar component:

<dp-month-calendar [(ngModel)]="selectedDate" [config]="config"></dp-month-calendar>

Here are the available configurations:

Here is the list of APIs:

Inline - Time Select

You can use the <dp-time-select> component to display the time select widget without an associated input box.

i.e.

<dp-time-select [(ngModel)]="selectedDate" [config]="config"></dp-time-select>

Attributes:

Attributes (Output):

Configuration: In order to provide configurations to the time-select you need to pass it to the dp-time-select component:

<dp-time-select [(ngModel)]="selectedDate" [config]="config"></dp-time-select>

Here are the available configurations:

Inline - DayTime Calendar

You can use the <dp-day-time-calendar> component to display the calendar widget and time select widget without an associated input box.

i.e.

<dp-day-time-calendar [(ngModel)]="selectedDate" [config]="config"></dp-day-time-calendar>

Attributes:

Attributes (Output):

Configuration: In order to provide configurations to the day-time-calendar you need to pass it to the dp-day-time-calendar component:

<dp-day-time-calendar [(ngModel)]="selectedDate" [config]="config"></dp-day-time-calendar>

Here are the available configurations:

Directive

You can use the [dpDayPicker] directive to attach the picker to any component with an ngModel or a FormControl (using reactive forms).

i.e.

<input name="someName" [(ngModel)]="selectedDate" [dpDayPicker]="config" />

or using reactive forms:

<input name="someName" formControlName="selectedDate" [dpDayPicker]="config" />  
<!-- OR -->  
<input name="someName" [formControl]="selectedDateFormControl" [dpDayPicker]="config" />

or with @angular/material:

<md-input-container>  
 <input mdInput name="someName" [(ngModel)]="selectedDate" [dpDayPicker]="config" theme="dp-material" attachTo=".mat-input-wrapper" /></md-input-container>

Attributes:

Configuration: In order to provide configurations to the date-picker you need to pass it to the [dpDayPicker] directive:

<input [(ngModel)]="selectedDate" [dpDayPicker]="datePickerConfig" />

The IDatePickerDirectiveConfig is identical to IDatePickerConfig above except that it lacks the showGoToCurrent property.

Here is the list of APIs:

Compatibility

Internet Explorer 10:

Internet explorer 10 doesn't support hidden attribut, but you can use a css rule on data-hidden to hide date picker components:

[data-hidden="true"] {  
 display: none !important;}

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]