Components / Date Inputs / DateInput

Getting Started with Kendo UI for Angular DateInput

The DateInput represents an input field that recognizes and formats scheduling values such as dates.

Basic Usage

The following example demonstrates the DateInput in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected value is: {{value | kendoDate:'MM/dd/yyyy'}}
        </div>
        <div class="example-wrapper">
            <p>Enter a date:</p>
            <kendo-dateinput
                [(value)]="value"
            ></kendo-dateinput>
            <p>(use ← 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

Events

The following example demonstrates basic DateInput events.

import { Component, ViewEncapsulation } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-dateinput
            (blur)="onBlur()"
            (focus)="onFocus()"
            (valueChange)="onChange($event)"
            [value]="value"
        >
        </kendo-dateinput>
        <event-log title="Event log" [events]="events">
        </event-log>
    </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 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 { DateInputModule } 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, DateInputModule ]
})

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);

In this article