All Components
Components

Components / DateInputs / DateInput

DateInput Overview

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