The DatePicker combines the Kendo UI Date Input
and Calendar components and its use to enables enter or pick a date value of
user.
The example for Kendo DatePicker looks like -
import { Component } from '@angular/core';
@Component({
@Component({
selector: 'my-app',
template: `
<div class="datepicker">
<p>Select a date:</p>
<kendo-datepicker [(value)]="value"></kendo-datepicker>
</div>`
})
class AppComponent {
public value: Date = new Date(2019, 3, 10);
}
The DatePicker contains the following features -
ü Disabled
state
ü Date
ranges
ü Formats
ü DateInput
placeholders
ü Focused
calendar date
ü Active
Calendar View and Navigation Depth
ü Calendar
week number column
ü Calendar
templates
ü Forms
support
ü Integration
with JSON
ü Globalization
ü Keyboard
navigation
ü Accessibility
Example looks like –
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div class="datepicker">
<p>Select a date:</p>
<kendo-datepicker [(value)]="value"
[disabled]="true"
[min]="min"
[max]="max">
[format]="'dd-MMM-yyyy'"
</kendo-datepicker>
</div>`
})
class AppComponent {
public value: Date = new Date(2019, 3, 10);
}
The DatePicker Events looks like –
ü Blur
ü Focus
ü Open
ü Close
ü ValueChange
import
{ Component, ViewEncapsulation
} from '@angular/core';
import
{ IntlService } from
'@progress/kendo-angular-intl';
@Component({
encapsulation: ViewEncapsulation.None,
selector: 'my-app',
template: `
<div
class="datepicker">
<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')}` : '';
}
}
I hope you are enjoying with this post! Please share with you friends!! Thank you!!!