Awesome

Date Picker

This is a configurable date-picker build for Angular applications.
Supports latest (Angular 15) 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 ] })

4. Add @import '~@angular/cdk/overlay-prebuilt.css'; to your global styles (usually styles.(scss/sass/css/less). You could also add it via the angular.json file under the styles attribute:

 "projects": {
    "your-project": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              ...
              "node_modules/@angular/cdk/overlay-prebuilt.css"
            ],
   ...    

Contributors

This project exists thanks to all the people who contribute. [Contribute].
<a href="graphs/contributors"><img src="https://opencollective.com/angular-datepicker/contributors.svg?width=890" /></a>

Backers

Thank you to all our backers! 🙏 [Become a backer]
<a href="https://opencollective.com/angular-datepicker#backers" target="_blank"><img src="https://opencollective.com/angular-datepicker/backers.svg?width=890"></a>

Usage

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

Locale

In order to change the locale you will need first to import the locale you want to work with and apply it to the Dayjs object. More information about this can be found in the dayjs documentation here.
Note: The locale is set to en by default. If you change the locale after the first initialization of the date-picker then you will need to reinitialize the date-picker.

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: Dayjs \| 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" /></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]

<a href="https://opencollective.com/angular-datepicker/sponsor/0/website" target="_blank"><img src="https://opencollective.com/angular-datepicker/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/angular-datepicker/sponsor/1/website" target="_blank"><img src="https://opencollective.com/angular-datepicker/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/angular-datepicker/sponsor/2/website" target="_blank"><img src="https://opencollective.com/angular-datepicker/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/angular-datepicker/sponsor/3/website" target="_blank"><img src="https://opencollective.com/angular-datepicker/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/angular-datepicker/sponsor/4/website" target="_blank"><img src="https://opencollective.com/angular-datepicker/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/angular-datepicker/sponsor/5/website" target="_blank"><img src="https://opencollective.com/angular-datepicker/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/angular-datepicker/sponsor/6/website" target="_blank"><img src="https://opencollective.com/angular-datepicker/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/angular-datepicker/sponsor/7/website" target="_blank"><img src="https://opencollective.com/angular-datepicker/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/angular-datepicker/sponsor/8/website" target="_blank"><img src="https://opencollective.com/angular-datepicker/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/angular-datepicker/sponsor/9/website" target="_blank"><img src="https://opencollective.com/angular-datepicker/sponsor/9/avatar.svg"></a>