All Components

TimePicker Overview

The TimePicker represents a time-list where the user can enter or pick time values.

Basic Usage

The following example demonstrates the TimePicker in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected value is: {{value | kendoDate:'hh:mm:ss a'}}
        </div>
        <div class="example-wrapper" style="min-height: 400px">
            <p>Select a time value:</p>
            <kendo-timepicker
                [(value)]="value"
            ></kendo-timepicker>
            <p>(use Alt+↓ to open the time list, Tab to move to the next time section in the popup, ↑ to increment and ↓ to decrement the value)</p>
        </div>
    `
})

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

Features

The TimePicker delivers the following features:

Disabled State

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

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

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

Incremental Steps

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

The available options are:

  • 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-timepicker
                [format]="'HH:mm:ss'"
                [steps]="steps"
                [value]="value"
            ></kendo-timepicker>
            <p>(↑ to increment and ↓ to decrement the value)</p>
        </div>
    `
})

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

Time Ranges

You can control the range of time values in the TimePicker by setting the min and max properties. When the min and max properties are configured and the selected time 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:'t'}} and {{max | kendoDate:'t'}} are valid</p>
            <p>Errors: {{ dateModel.errors | json }}</p>
        </div>
        <div class="example-wrapper">
            <p>Select a time:</p>
            <kendo-timepicker
                [min]="min"
                [max]="max"
                [(ngModel)]="value"
                #dateModel="ngModel"
            ></kendo-timepicker>
        </div>
    `
})

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

Formats

You can control the format of the TimePicker 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 time:</p>
              <kendo-timepicker
                  [format]="'HH:mm:ss'"
                  [value]="value"
              ></kendo-timepicker>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
              <p>Select a short time:</p>
              <kendo-timepicker
                  [format]="'hh:mm a'"
                  [value]="value"
              ></kendo-timepicker>
          </div>
      </div>
    `
})

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

DateInput Placeholders

For its input field, the TimePicker enables you to:

Rendering a Text Hint

When the value of the TimePicker 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-timepicker placeholder="Type in your birth date..."></kendo-timepicker>
          </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-timepicker formatPlaceholder="wide"></kendo-timepicker>
       </div>

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

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

       <div class="col-xs-12 col-md-6 example-col">
         <p>Display defined format:</p>
         <kendo-timepicker format="HH:mm:ss" formatPlaceholder="formatPattern"></kendo-timepicker>
       </div>

       <div class="col-xs-12 col-md-6 example-col">
         <p>Custom defined format descriptions</p>
         <kendo-timepicker format="HH:mm:ss"
           [formatPlaceholder]="{ hour: 'h', minute: 'm', second: 's' }"></kendo-timepicker>
       </div>
      </div>
    `
})

class AppComponent { }

Forms Support

You can use the TimePicker in:

Template-Driven Forms

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

The following example demonstrates how to use the TimePicker 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: 't' }}</strong></p>
                   <p *ngIf="!form.valid">
                       Only values between 02:00 AM and 10:00 PM are valid!
                   </p>
               </div>
               <label>
                   Select Birthdate:
                   <kendo-timepicker
                       name="birthDate"
                       [(ngModel)]="user.birthDate"
                       [min]="min"
                       [max]="max"
                   ></kendo-timepicker>
               </label>
           </form>
       `
   })
   class AppComponent implements OnInit {
       public user: User;
       public min: Date = new Date(2000, 11, 31, 2);
       public max: Date = new Date(2000, 11, 31, 22);
       ngOnInit() {
           this.user = {
               birthDate: new Date(2000, 11, 31, 4)
           };
       }
   }

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 TimePicker 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: 't'}}</strong></p>
                   <p *ngIf="!myForm.valid">
                       Only values between 02:00 AM and 10:00 PM are valid!
                   </p>
                   <p>
                        Errors: {{ myForm.controls.birthDate.errors | json }}
                    </p>
               </div>

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

       public myForm: FormGroup = new FormGroup({
           birthDate: new FormControl(new Date(2000, 11, 31, 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 TimePicker works only with JavaScript Date instances.

To bind the TimePicker 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 TimePicker to get the selected Date value.

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

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

export interface JsonModel {
   departureTime: string;
}

export interface User {
   departureTime: 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 departure time:
               <kendo-timepicker
                   #departureTime
                   name="departureTime"
                   [(ngModel)]="user.departureTime"
                   (valueChange)="handleChange($event)"
               ></kendo-timepicker>
           </label>
       </form>
    `
})
export class AppComponent implements OnInit {
   public user: User;
   public model: JsonModel = JSON.parse('{ "departureTime": "2017-06-30T12:22:32Z" }'); //parse JSON date in UTC timezone
   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.departureTime = this.intl.formatDate(value, 'yyyy-MM-dd HH:mm:ss'); //update the JSON departureTime 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 TimePicker 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">
            <div class="col-md-6">
                <kendo-timepicker
                    (blur)="onBlur()"
                    (focus)="onFocus()"
                    (open)="onOpen()"
                    (close)="onClose()"
                    (valueChange)="onChange($event)"
                    [value]="value"
                >
                </kendo-timepicker>
            </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(); //set time to NOW

  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')}` : '';
  }
}
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { TimePickerModule } 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, TimePickerModule ]
})

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