DatePicker Overview

The DatePicker combines the Kendo UI DateInput and Calendar components.

It enables the user to enter or pick a date value.

Basic Usage

The following example demonstrates the DatePicker in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected value is: {{value | kendoDate:'MM/dd/yyyy'}}
        </div>
        <div class="example-wrapper" style="min-height: 400px">
            <p>Select a date:</p>
            <kendo-datepicker
                [(value)]="value"
            ></kendo-datepicker>
            <p>(use Alt+↓ to open the calendar, ← and →  to navigate, ↑ to increment and ↓ to decrement the value)</p>
        </div>
    `
})

class AppComponent {
    public value: Date = new Date(2000, 2, 10);
}

Features

The DatePicker delivers the following features:

Disabled state
Date ranges
Formats
Focused calendar date
Active Calendar View and Navigation Depth
Calendar templates
Forms support
Integration with JSON
Globalization
Keyboard navigation
Accessibility

Disabled State

By default, the DatePicker is enabled. To disable the component, set its disabled property to true.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <p>Select a date:</p>
            <kendo-datepicker [disabled]="true" [value]="value"></kendo-datepicker>
        </div>
    `
})

class AppComponent {
    public value: Date = new Date(2000, 2, 10);
}

You can control the range of dates in the DatePicker by setting the min and max properties. When the min and max properties are configured and the selected date value is out of this range, the component triggers a validation error.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <p>Only values between {{min | kendoDate:'d'}} and {{max | kendoDate:'d'}} are valid</p>
            <p>Errors: {{ dateModel.errors | json }}</p>
        </div>
        <div class="example-wrapper">
            <p>Select a date:</p>
            <kendo-datepicker
                [min]="min"
                [max]="max"
                [(ngModel)]="value"
                #dateModel="ngModel"
            ></kendo-datepicker>
        </div>
    `
})

class AppComponent {
    public min: Date = new Date(2000, 2, 10);
    public max: Date = new Date(2002, 2, 10);
    public value: Date = new Date(2001, 2, 10);
}

Formats

You can control the format of the DatePicker by using the format property, which accepts string parameters. When format is set and the input element is not focused, the value is formatted accordingly. By default, the format property is set to 'd'.

For more information on the date and number formats Kendo UI for Angular supports, refer to the kendo-intl GitHub repository.

@Component({
    selector: 'my-app',
    template: `
      <div class="example-wrapper" style="min-height: 400px;">
          <div class="col-xs-12 col-sm-6 example-col">
              <p>Select a long date:</p>
              <kendo-datepicker
                  [format]="'dd-MMM-yyyy HH:mm:ss'"
                  [value]="value"
              ></kendo-datepicker>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
              <p>Select a short date:</p>
              <kendo-datepicker
                  [format]="'MMMM yyyy'"
                  [value]="value"
              ></kendo-datepicker>
          </div>
      </div>
    `
})

class AppComponent {
    public value: Date = new Date(2000, 2, 10, 13, 30, 0);
}

Focused Calendar Dates

The Calendar always displays a focused date and, by default, the focused date is today's date. To change the focused date, use the focusedDate property by setting it to a specific Date value. The Date value has to be a valid JavaScript Date object.

@Component({
selector: 'my-app',
template: `
<kendo-datepicker [focusedDate]="focusedDate"></kendo-datepicker>
`
})
class AppComponent {
    public focusedDate: Date = new Date(2010, 10, 10);
}

To define the first view that the Calendar initially renders, use the activeView property.

To control the navigation depth of the Calendar view, use the `topView and bottomView properties.

The CalendarView type defines the following possible view options:

month—Shows the days of the month.
year—Shows the months of the year.
decade&Mdash;Shows the years of the decade.
century—Shows the decades of the century.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        Selected date is {{ value | kendoDate:'MMMM yyyy' }}
    </div>
      <kendo-datepicker
          [activeView]="'decade'"
          [bottomView]="'year'"
          [topView]="'decade'"
          [format]="'MMMM yyyy'"
          [(value)]="value"
      ></kendo-datepicker>
  `
})
class AppComponent {
    public value: Date;
}

Calendar Templates

The DatePicker enables you to customize the content of each calendar cell by using cell templates. To define a cell template, nest a <ng-template> tag with one of the available cell template directives inside the <kendo-datepicker> selector.

The available cell template directives are:

kendoCalendarMonthCellTemplate—Used for rendering the content of the month view cells.
kendoCalendarYearCellTemplate—Used for rendering the content of the year view cells.
kendoCalendarDecadeCellTemplate—Used for rendering the content of the decade view cells.
kendoCalendarCenturyCellTemplate—Used for rendering the content of the century view cells.
kendoCalendarCellTemplate—Equivalent to the kendoCalendarMonthCellTemplate directive.

The template context is set to the current Calendar component. To get a reference to the current date, use the let-date directive.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
      <style>
        .meeting {
          position: relative;
          color: #00a1e8;
        }

        .meeting:after {
            position: absolute;
            bottom: -2px;
            left: 50%;
            width: 3px;
            height: 3px;
            margin-left: -1.5px;
            content: '';
            border-radius: 50%;
            background-color: #00a1e8;
        }

        .k-state-selected .meeting {
          color: #fff;
        }

        .k-state-selected .meeting:after {
          background-color: #fff;
        }
      </style>
      <kendo-datepicker>
        <ng-template kendoCalendarMonthCellTemplate let-date>
            <span [ngClass]="isMeeting(date)">{{date.getDate()}}</span>
        </ng-template>
        <ng-template kendoCalendarYearCellTemplate let-context="cellContext">
            <span [ngClass]="isYearMeeting(context.value)">{{context.formattedValue}}</span>
        </ng-template>
        <ng-template kendoCalendarDecadeCellTemplate let-context="cellContext">
            <span [ngClass]="isDecadeMeeting(context.value)">{{context.formattedValue}}</span>
        </ng-template>
        <ng-template kendoCalendarCenturyCellTemplate let-context="cellContext">
            <span [ngClass]="isCenturyMeeting(context.value)">{{context.formattedValue}}</span>
        </ng-template>
      </kendo-datepicker>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public isMeeting(date: Date) {
        return /10|15|20/.test(date.getDate()) ? 'meeting' : '';
    }
    public isYearMeeting(date: Date) {
        return date.getMonth() % 3 ? 'meeting' : '';
    }
    public isDecadeMeeting(date: Date) {
        return date.getDate() % 2 ? 'meeting' : '';
    }
    public isCenturyMeeting(date: Date) {
        return date.getDate() % 20 ? 'meeting' : '';
    }
}

Forms Support

You can use the DatePicker in:

Template-driven forms
Reactive forms

Template-Driven Forms

The template-driven forms enable you to bind the DatePicker to the model by using the ngModel directive.

The following example demonstrates how to use the DatePicker in template-driven forms.

export interface User {
       birthDate: Date;
   }

   @Component({
       selector: 'my-app',
       template: `
           <form #form="ngForm">
               <div class="example-config">
                   <p>The selected birth date is <strong>{{ user.birthDate | kendoDate: 'M/d/yyyy' }}</strong></p>
                   <p *ngIf="!form.valid">
                       Only values between 1/1/1917 and 12/31/2000 are valid!
                   </p>
               </div>
               <label>
                   Select Birthdate:
                   <kendo-datepicker
                       name="birthDate"
                       [(ngModel)]="user.birthDate"
                       [min]="min"
                       [max]="max"
                   ></kendo-datepicker>
               </label>
           </form>
       `
   })
   class AppComponent implements OnInit {
       public user: User;
       public min: Date = new Date(1917, 0, 1);
       public max: Date = new Date(2000, 11, 31);
       ngOnInit() {
           this.user = {
               birthDate: new Date(1990, 0, 1)
           };
       }
   }

Reactive Forms

The FormGroup decorator provides a way to render reactive forms. For more details, refer to the Angular documentation.

The following example demonstrates how to use the DatePicker in a reactive form.

import {
       FormsModule,
       ReactiveFormsModule,
       FormGroup,
       FormControl
   } from '@angular/forms';

   @Component({
       selector: 'my-app',
       template: `
           <form [formGroup]="myForm">
               <div class="example-config">
                   <p>The form is valid: <strong>{{myForm.controls.birthDate.valid}}</strong></p>
                   <p>The form.birthDate value is: <strong>{{myForm.controls.birthDate.value | kendoDate: 'M/d/yyyy'}}</strong></p>
                   <p *ngIf="!myForm.valid">
                       Only values between 1/1/1917 and 12/31/2000 are valid!
                   </p>
                   <p>
                        Errors: {{ myForm.controls.birthDate.errors | json }}
                    </p>
               </div>

               <label>
                   Select Birthdate:
                   <kendo-datepicker
                       formControlName="birthDate"
                       [min]="min"
                       [max]="max"
                       required
                   ></kendo-datepicker>
               </label>
           </form>
       `
   })
   class AppComponent {
       public min: Date = new Date(1917, 0, 1);
       public max: Date = new Date(2000, 11, 31);

       public myForm: FormGroup = new FormGroup({
           birthDate: new FormControl(new Date(2000, 10, 10))
       });
   }

Integration with JSON

Generally, the data which is received from the server is serialized in a JSON format. The date object in JSON is an ISO8601-formatted date string. For more details, refer to the documentation on the JSON.stringify method. On the other hand, the DatePicker works only with JavaScript Date instances.

To bind the DatePicker to dates which are serialized as strings, handle the parsing process:

Convert the JSON date strings into valid JavaScript Date objects by using the IntlService or any other suitable Date parser.
Define the value input property of the component—the same approach applies to reactive and template-driven forms.
Wire the valueChange output property of the DatePicker to get the selected Date value.

The following example demonstrates how to set the value of the DatePicker.

import { Component } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

export interface JsonModel {
   birthDate: string;
}

export interface User {
   birthDate: Date;
}

@Component({
    selector: 'my-app',
    template: `
      <form #form="ngForm">
           <div class="example-config">
               <p>Form model: {{ user | json }}</p>
               <p>Model: {{ output }}</p>
           </div>
           <label>
               Select Birthdate:
               <kendo-datepicker
                   #birthdate
                   name="birthDate"
                   [(ngModel)]="user.birthDate"
                   (valueChange)="handleChange($event)"
               ></kendo-datepicker>
           </label>
       </form>
    `
})
export class AppComponent implements OnInit {
   public user: User;
   public model: JsonModel = JSON.parse('{ "birthDate": "2017-06-30" }'); //parse JSON data
   public output: string = JSON.stringify(this.model); //stringify model for presentational purposes

   constructor(private intl: IntlService) {}

   public ngOnInit() {
       this.user = this.parse(this.model);
   }

   public handleChange(value: Date) {
     this.model.birthDate = this.intl.formatDate(value, 'yyyy-MM-dd'); //update the JSON birthDate string date
     this.output = JSON.stringify(this.model);
   }

   // A simple method for the string-to-date conversion
   private parse(json: { [x]: string | number }) {
     Object.keys(json).map(key => {
       const date = this.intl.parseDate(json[key]);
       if (date !== null) { json[key] = date; }
     });

     return json;
   }
}

import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IntlModule } from '@progress/kendo-angular-intl';
import { HttpModule } from '@angular/http';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';

import 'hammerjs';

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ FormsModule, BrowserModule, BrowserAnimationsModule, IntlModule, HttpModule, DateInputsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Events

The following example demonstrates basic DatePicker events.

import { Component, ViewEncapsulation } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'my-app',
  template: `
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <kendo-datepicker
                    (blur)="onBlur()"
                    (focus)="onFocus()"
                    (open)="onOpen()"
                    (close)="onClose()"
                    (valueChange)="onChange($event)"
                    [value]="value"
                >
                </kendo-datepicker>
            </div>
            <div class="col-md-6">
                <event-log title="Event log" [events]="events">
                </event-log>
            </div>
        </div>
    </div>
  `
})
export class AppComponent {
  public events: string[] = [];
  public value: Date = new Date();

  constructor(private intl: IntlService) {}

  public onBlur(): void {
    this.log('blur');
  }

  public onFocus(): void {
    this.log('focus');
  }

  public onOpen(): void {
    this.log('open');
  }

  public onClose(): void {
    this.log('close');
  }

  public onChange(value: Date): void {
    this.log('change', value);
  }

  private log(event: string, value?: Date): void {
    this.events = [`${event}${this.formatValue(value)}`].concat(this.events);
  }

  private formatValue(value?: Date): string {
    return value ? ` - ${this.intl.formatDate(value, 'd')}` : '';
  }
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DatePickerModule } from '@progress/kendo-angular-dateinputs';

import { AppComponent }   from './app.component';
import { EventLogComponent }   from './event-log.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent, EventLogComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, DatePickerModule ]
})

export class AppModule { }

import { Component, Input } from '@angular/core';

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

DatePicker Overview

Basic Usage

Features

Disabled State

Date Ranges

Formats

Focused Calendar Dates

Active Calendar View and Navigation Depth

Calendar Templates

Forms Support

Template-Driven Forms

Reactive Forms

Integration with JSON

Events

Suggested Links

Was this article helpful?

Submit additional feedback

Kendo UI for Angular

Community & Support

Get Involved