Angular 4

Kendo DatePicker in Angular 4 and 5 Example!

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({
    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 output looks like –
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

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..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Kendo DatePicker in Angular 4 and 5 Example! Kendo DatePicker in Angular 4 and 5 Example! Reviewed by Anil Singh on 9:14 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^