Components / Date Inputs / DatePicker

Getting Started with Kendo UI for Angular DatePicker

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);
}

Functionality and Features

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);

In this article