ng2-date-picker v19.0.0

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: