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);
}
Functionality and Features
- Disabled DatePicker
- Read-only DatePicker
- Focused dates
- Date ranges
- Fast navigation bar
- Formats
- Placeholders
- Active view
- View selection depth
- Week number column
- Templates
- Forms support
- Integration with JSON
- Globalization
- Keyboard navigation
- Accessibility
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);