All Components

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

Features

The DateInput delivers the following features:

Disabled State

By default, the DateInput is enabled. To disable the component, set its disabled property to true.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <p>Select a date:</p>
            <kendo-dateinput [disabled]="true" [value]="value"></kendo-dateinput>
        </div>
    `
})

class AppComponent {
    public value: Date = new Date(2000, 2, 10);
}

Spin Buttons

The spin buttons of the DateInput increase or decrease the date value by adding or subtracting one day.

By default, the spin buttons are disabled and the spinners property is set to false. To render the spin buttons, set spinners to true.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <p>Select a date:</p>
            <kendo-dateinput [spinners]="true" [value]="value"></kendo-dateinput>
        </div>
    `
})

class AppComponent {
    public value: Date = new Date(2000, 2, 10);
}

Incremental Steps

By default, the DateInput increments or decrements each part of its date values by one step. To change the default setup, use the steps property.

The available options are:

  • year: Number—Controls the incremental step of the year value.
  • month: Number—Controls the incremental step of the month value.
  • day: Number—Controls the incremental step of the day value.
  • hour: Number—Controls the incremental step of the hour value.
  • minute: Number—Controls the incremental step of the minute value.
  • second: Number—Controls the incremental step of the second value.
@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <p>Select a date:</p>
            <kendo-dateinput
                [format]="'MM/dd/yyyy hh:mm a'"
                [steps]="steps"
                [value]="value"
            ></kendo-dateinput>
            <p>(↑ to increment and ↓ to decrement the value)</p>
        </div>
    `
})

class AppComponent {
    public steps: any = { year: 10, day: 5, hour: 2, minute: 15 };
    public value: Date = new Date(2000, 2, 10, 10, 30);
}

Date Ranges

You can control the range of dates in the DateInput by setting the min and max properties. When the min and max properties are configured and the selected date value is out of this range, the component triggers a validation error.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <p>Only values between {{min | kendoDate:'d'}} and {{max | kendoDate:'d'}} are valid</p>
            <p>Errors: {{ dateModel.errors | json }}</p>
        </div>
        <div class="example-wrapper">
            <p>Select a date:</p>
            <kendo-dateinput
                [min]="min"
                [max]="max"
                [(ngModel)]="value"
                #dateModel="ngModel"
            ></kendo-dateinput>
        </div>
    `
})

class AppComponent {
    public min: Date = new Date(2000, 2, 10);
    public max: Date = new Date(2002, 2, 10);
    public value: Date = new Date(2001, 2, 10);
}

Formats

You can control the format of the DateInput by using the format property, which accepts string parameters. When format is set and the input element is not focused, the value is formatted accordingly. By default, the format property is set to 'd'.

For more information on the date and number formats Kendo UI for Angular supports, refer to the kendo-intl GitHub repository.

@Component({
    selector: 'my-app',
    template: `
      <div class="example-wrapper" style="min-height: 400px;">
          <div class="col-xs-12 col-sm-6 example-col">
              <p>Select a long date:</p>
              <kendo-dateinput
                  [format]="'dd-MMM-yyyy HH:mm:ss'"
                  [value]="value"
              ></kendo-dateinput>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
              <p>Select a short date:</p>
              <kendo-dateinput
                  [format]="'MMMM yyyy'"
                  [value]="value"
              ></kendo-dateinput>
          </div>
      </div>
    `
})

class AppComponent {
    public value: Date = new Date(2000, 2, 10, 13, 30, 0);
}

Placeholders

For its input field, the DateInput enables you to:

Rendering a Text Hint

When the value of the DateInput is null, you can specify a text hint for its input field by setting the placeholder option of the component.

@Component({
    selector: 'my-app',
    template: `
      <div class="example-wrapper" style="min-height: 400px;">
          <div class="col-xs-12 col-sm-6 example-col">
              <p>Select date:</p>
              <kendo-dateinput placeholder="Type in your birth date..."></kendo-dateinput>
          </div>
      </div>
    `
})

class AppComponent { }

Setting the Description of the Format Sections

The formatPlaceholder option enables you to set the way the format sections of the input field are rendered. For example, whether the month input is prompted as month or MM.

The formatPlaceholder provides the following available options which you can set:

  • 'wide'—Displays the full description of the format section. For example, turns MM into month. Retrieved from CLDR.
  • 'narrow'—Displays the narrow description of the format section. For example, turns MM into mo.. Retrieved from CLDR.
  • 'short'—Displays the short description of the format section. For example, turns MM into mo.. Retrieved from CLDR.
  • 'formatPattern'—Directly displays the format section. For example, turns MM into MM.
  • [CustomFormatPlaceholder](/kendo-angular-ui/components/dateinputs/api/DateInputCustomFormatPlaceholder/)—An object that defines the description of the format sections. For example, { day: 'd.', month: 'M.', year: 'y', hour: 'h.' }.
@Component({
    selector: 'my-app',
    template: `
      <div class="row example-wrapper" style="min-height: 450px;">
       <div class="col-xs-12 col-md-6 example-col">
         <p>Full-length format description:</p>
         <kendo-dateinput formatPlaceholder="wide"></kendo-dateinput>
       </div>

       <div class="col-xs-12 col-md-6 example-col">
         <p>Narrow-length format description:</p>
         <kendo-dateinput formatPlaceholder="narrow"></kendo-dateinput>
       </div>

       <div class="col-xs-12 col-md-6 example-col">
         <p>Short-length format description:</p>
         <kendo-dateinput formatPlaceholder="short"></kendo-dateinput>
       </div>

       <div class="col-xs-12 col-md-6 example-col">
         <p>Display defined format:</p>
         <kendo-dateinput format="MM/dd/yyyy" formatPlaceholder="formatPattern"></kendo-dateinput>
       </div>

       <div class="col-xs-12 col-md-6 example-col">
         <p>Custom defined format descriptions</p>
         <kendo-dateinput format="G"
           [formatPlaceholder]="{
             year: 'y', month: 'M', day: 'd',
             hour: 'h', minute: 'm', second: 's'
           }"
         ></kendo-dateinput>
       </div>
      </div>
    `
})

class AppComponent { }

Forms Support

You can use the DateInput in:

Template-Driven Forms

The template-driven forms enable you to bind the DateInput to the model by using the ngModel directive.

The following example demonstrates how to use the DateInput in template-driven forms.

export interface User {
       birthDate: Date;
   }

   @Component({
       selector: 'my-app',
       template: `
           <form #form="ngForm">
               <div class="example-config">
                   <p>The selected birth date is <strong>{{ user.birthDate | kendoDate: 'M/d/yyyy' }}</strong></p>
                   <p *ngIf="!form.valid">
                       Only values between 1/1/1917 and 12/31/2000 are valid!
                   </p>
               </div>
               <label>
                   Select Birthdate:
                   <kendo-dateinput
                       name="birthDate"
                       [(ngModel)]="user.birthDate"
                       [min]="min"
                       [max]="max"
                   ></kendo-dateinput>
               </label>
           </form>
       `
   })
   class AppComponent implements OnInit {
       public user: User;
       public min: Date = new Date(1917, 0, 1);
       public max: Date = new Date(2000, 11, 31);
       ngOnInit() {
           this.user = {
               birthDate: new Date(1990, 0, 1)
           };
       }
   }

Reactive Forms

The FormGroup decorator provides a way to render reactive forms. For more details, refer to the Angular documentation.

The following example demonstrates how to use the DateInput in a reactive form.

import {
       FormsModule,
       ReactiveFormsModule,
       FormGroup,
       FormControl
   } from '@angular/forms';

   @Component({
       selector: 'my-app',
       template: `
           <form [formGroup]="myForm">
               <div class="example-config">
                   <p>The form is valid: <strong>{{myForm.controls.birthDate.valid}}</strong></p>
                   <p>The form.birthDate value is: <strong>{{myForm.controls.birthDate.value | kendoDate: 'M/d/yyyy'}}</strong></p>
                   <p *ngIf="!myForm.valid">
                       Only values between 1/1/1917 and 12/31/2000 are valid!
                   </p>
               </div>

               <label>
                   Select Birthdate:
                   <kendo-dateinput
                       formControlName="birthDate"
                       [min]="min"
                       [max]="max"
                       required
                   ></kendo-dateinput>
               </label>
           </form>
       `
   })
   class AppComponent {
       public min: Date = new Date(1917, 0, 1);
       public max: Date = new Date(2000, 11, 31);

       public myForm: FormGroup = new FormGroup({
           birthDate: new FormControl(new Date(2000, 10, 10))
       });
   }

Integration with JSON

Generally, the data which is received from the server is serialized in a JSON format. The date object in JSON is an ISO8601-formatted date string. For more details, refer to the documentation on the JSON.stringify method. On the other hand, the DateInput works only with JavaScript Date instances.

To bind the DateInput to dates which are serialized as strings, handle the parsing process:

  1. Convert the JSON date strings into valid JavaScript Date objects by using the IntlService or any other suitable Date parser.
  2. Define the value input property of the component—the same approach applies to reactive and template-driven forms.
  3. Wire the valueChange output property of the DateInput to get the selected Date value.

The following example demonstrates how to set the value of the DateInput.

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

export interface JsonModel {
   birthDate: string;
}

export interface User {
   birthDate: Date;
}

@Component({
    selector: 'my-app',
    template: `
      <form #form="ngForm">
           <div class="example-config">
               <p>Form model: {{ user | json }}</p>
               <p>Model: {{ output }}</p>
           </div>
           <label>
               Select Birthdate:
               <kendo-dateinput
                   #birthdate
                   name="birthDate"
                   [(ngModel)]="user.birthDate"
                   (valueChange)="handleChange($event)"
               ></kendo-dateinput>
           </label>
       </form>
    `
})
export class AppComponent implements OnInit {
   public user: User;
   public model: JsonModel = JSON.parse("{ 'birthDate': '2017-06-30' }"); //parse JSON data
   public output: string = JSON.stringify(this.model); //stringify model for presentational purposes

   constructor(private intl: IntlService) {}

   public ngOnInit() {
       this.user = this.parse(this.model);
   }

   public handleChange(value: Date) {
     this.model.birthDate = this.intl.formatDate(value, 'yyyy-MM-dd'); //update the JSON birthDate string date
     this.output = JSON.stringify(this.model);
   }

   // A simple method for the string-to-date conversion
   private parse(json: { [x]: string | number }) {
     Object.keys(json).map(key => {
       const date = this.intl.parseDate(json[key]);
       if (date !== null) { json[key] = date; }
     });

     return json;
   }
}
import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IntlModule } from '@progress/kendo-angular-intl';
import { HttpModule } from '@angular/http';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';

import 'hammerjs';

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ FormsModule, BrowserModule, BrowserAnimationsModule, IntlModule, HttpModule, DateInputsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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="container-fluid">
        <div class="row">
            <kendo-dateinput
                (blur)="onBlur()"
                (focus)="onFocus()"
                (valueChange)="onChange($event)"
                [value]="value"
            >
            </kendo-dateinput>
            <event-log title="Event log" [events]="events">
            </event-log>
        </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 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