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!!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
