python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions