Angular Time Picker Component

Time Picker

Create consistent cross-browser and cross-device Angular time picker.

Available in Other JavaScript Frameworks

CoreUI Angular Time Picker Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Examples

import { Component } from '@angular/core';
import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-example',
  templateUrl: './time-picker-example.component.html',
  standalone: true,
  imports: [RowComponent, ColComponent, TimePickerComponent]
})
export class TimePickerExampleComponent {
  time? = new Date();
}

<c-row>
  <c-col lg="4">
    <c-time-picker />
  </c-col>

  <c-col lg="4">
    <c-time-picker [time]="time" />
  </c-col>
</c-row>

Sizing

Set heights using size property like size="lg" and size="sm".

import { Component } from '@angular/core';
import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-sizing',
  templateUrl: './time-picker-sizing.component.html',
  imports: [RowComponent, ColComponent, TimePickerComponent]
})
export class TimePickerSizingComponent {}

<c-row class="mb-4">
  <c-col lg="5">
    <c-time-picker size="lg" />
  </c-col>
</c-row>

<c-row>
  <c-col lg="4">
    <c-time-picker size="sm" />
  </c-col>
</c-row>

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

import { Component } from '@angular/core';
import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-disabled',
  templateUrl: './time-picker-disabled.component.html',
  imports: [RowComponent, ColComponent, TimePickerComponent]
})
export class TimePickerDisabledComponent {
  time? = new Date();
}

<c-row>
  <c-col lg="4">
    <c-time-picker disabled />
  </c-col>

  <c-col lg="4">
    <c-time-picker disabled [time]="time" />
  </c-col>
</c-row>

Readonly

Add the inputReadOnly boolean attribute to prevent modification of the input value.

import { Component } from '@angular/core';
import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-readonly',
  templateUrl: './time-picker-readonly.component.html',
  imports: [RowComponent, ColComponent, TimePickerComponent]
})
export class TimePickerReadonlyComponent {}

<c-row>
  <c-col lg="4">
    <c-time-picker inputReadOnly />
  </c-col>
</c-row>

Filtered

Add filter callback functions to limit selectable values.

import { DatePipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-filtered',
  templateUrl: './time-picker-filtered.component.html',
  imports: [RowComponent, ColComponent, TimePickerComponent, DatePipe]
})
export class TimePickerFilteredComponent {
  filterHours = (hour: number): boolean => hour > 8 && hour <= 23;
  filterMinutes = (min: number): boolean => (min %= 10) === 0;
  filterSeconds = (sec: number): boolean => (sec %= 15) === 0;

  readonly time = signal<Date | undefined>(new Date());

  handleTimeChange(time: Date | undefined) {
    if (time) {
      this.time.set(new Date(time?.getTime()));
    } else {
      this.time.set(time);
    }
  }
}

<c-row>
  <c-col lg="4">
    <c-time-picker
      (timeChange)="handleTimeChange($event)"
      [filterHours]="filterHours"
      [filterMinutes]="filterMinutes"
      [filterSeconds]="filterSeconds"
      [(time)]="time"
      seconds
    />
  </c-col>
  <c-col class="d-flex align-items-center">
    {{time() | date:'shortTime'}}
  </c-col>
</c-row>

import { Component, signal } from '@angular/core';
import {
  ButtonDirective,
  ColComponent,
  DropdownCloseDirective,
  RowComponent,
  TemplateIdDirective,
  TimePickerComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-with-footer',
  templateUrl: './time-picker-with-footer.component.html',
  imports: [
    RowComponent,
    ColComponent,
    TimePickerComponent,
    TemplateIdDirective,
    ButtonDirective,
    DropdownCloseDirective
  ]
})
export class TimePickerWithFooterComponent {
  readonly time = signal(new Date());
}

<c-row>
  <c-col lg="4">
    <c-time-picker
      [(time)]="time"
      placeholder="-- : --"
      #timePicker="cTimePicker"
    >
      <ng-template cTemplateId="timePickerFooter" let-dropdown>
        <button cButton color="secondary" variant="ghost" size="sm"
                (click)="timePicker.clearTime()" cDropdownClose
                [dropdownComponent]="dropdown">
          Cancel
        </button>
        <button cButton color="primary" size="sm" [disabled]="!time" cDropdownClose [dropdownComponent]="dropdown">OK</button>
      </ng-template>
    </c-time-picker>
  </c-col>
</c-row>

Non-english locale

Auto

import { Component } from '@angular/core';
import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-auto',
  templateUrl: './time-picker-auto.component.html',
  imports: [RowComponent, ColComponent, TimePickerComponent]
})
export class TimePickerAutoComponent {}

<c-row>
  <c-col lg="4">
    <c-time-picker />
  </c-col>
</c-row>

Chinese

import { Component } from '@angular/core';
import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-chinese',
  templateUrl: './time-picker-chinese.component.html',
  imports: [RowComponent, ColComponent, TimePickerComponent]
})
export class TimePickerChineseComponent {}

<c-row>
  <c-col lg="4">
    <c-time-picker placeholder="入住日期" locale="zh-CN" seconds />
  </c-col>
</c-row>

Japanese

import { Component } from '@angular/core';
import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-japanese',
  templateUrl: './time-picker-japanese.component.html',
  imports: [RowComponent, ColComponent, TimePickerComponent]
})
export class TimePickerJapaneseComponent {}

<c-row>
  <c-col lg="4">
    <c-time-picker placeholder="日付を選択" locale="ja" seconds />
  </c-col>
</c-row>

Korean

import { Component } from '@angular/core';
import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-korean',
  templateUrl: './time-picker-korean.component.html',
  imports: [RowComponent, ColComponent, TimePickerComponent]
})
export class TimePickerKoreanComponent {}

<c-row>
  <c-col lg="4">
    <c-time-picker placeholder="날짜 선택" locale="ko" />
  </c-col>
</c-row>

Hebrew

import { Component } from '@angular/core';
import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-hebrew',
  templateUrl: './time-picker-hebrew.component.html',
  imports: [RowComponent, ColComponent, TimePickerComponent]
})
export class TimePickerHebrewComponent {}

<c-row>
  <c-col lg="4">
    <c-time-picker placeholder="בחר תאריך" locale="he-IL" />
  </c-col>
</c-row>

Persian

import { Component } from '@angular/core';
import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-persian',
  templateUrl: './time-picker-persian.component.html',
  imports: [RowComponent, ColComponent, TimePickerComponent]
})
export class TimePickerPersianComponent {}

<c-row>
  <c-col lg="4">
    <c-time-picker placeholder="تاریخ شروع" locale="fa-IR" seconds />
  </c-col>
</c-row>

Forms

Angular handles user input through reactive and template-driven forms. CoreUI Time Picker supports both types.

Reactive

import { JsonPipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

interface ITimePickerForm {
  timePicker: FormControl<Date | undefined | null>;
}

@Component({
  selector: 'docs-time-picker-reactive',
  templateUrl: './time-picker-reactive.component.html',
  imports: [RowComponent, ColComponent, ReactiveFormsModule, TimePickerComponent, JsonPipe]
})
export class TimePickerReactiveComponent implements OnInit {
  time = new Date();

  formGroup!: FormGroup<ITimePickerForm>;

  get toLocaleTimeString() {
    return this.formGroup.value.timePicker ? this.formGroup.value.timePicker.toLocaleTimeString() : '';
  }

  ngOnInit(): void {
    this.time.setMilliseconds(0);
    this.time.setSeconds(0);
    this.time.setMinutes(15);
    this.time.setHours(11);

    this.formGroup = new FormGroup<ITimePickerForm>({
      timePicker: new FormControl(this.time, { nonNullable: false })
    });
  }
}

<c-row>
  <c-col lg="4">
    <form [formGroup]="formGroup">
      <c-time-picker formControlName="timePicker" seconds />
    </form>
  </c-col>
</c-row>
<br>
Form value: {{formGroup.value | json }}
<br>
timePicker value: {{toLocaleTimeString}}

Template-driven

import { DatePipe, JsonPipe } from '@angular/common';
import { Component, OnInit, signal } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { ColComponent, RowComponent, TimePickerComponent } from '@coreui/angular';

@Component({
  selector: 'docs-time-picker-template-driven',
  templateUrl: './time-picker-template-driven.component.html',
  imports: [RowComponent, ColComponent, ReactiveFormsModule, FormsModule, TimePickerComponent, JsonPipe, DatePipe]
})
export class TimePickerTemplateDrivenComponent implements OnInit {
  readonly time = signal(new Date());

  ngOnInit(): void {
    const time = this.time();
    time.setMilliseconds(0);
    time.setSeconds(0);
    time.setMinutes(15);
    time.setHours(13);
    this.time.set(time);
  }
}

<c-row>
  <c-col lg="4">
    <form #form="ngForm">
      <c-time-picker [(ngModel)]="time" name="timePicker" />
    </form>
  </c-col>
</c-row>
<br>
Form value: {{ form.value | json }}
<br>
timePicker value: {{ form.value['timePicker'] | date:'H:mm'}}

API reference

TimePicker Module

import { 
  TimePickerModule,
  DropdownModule,
  SharedModule
} from '@coreui/angular';

@NgModule({
    imports: [
      TimePickerModule,
      DropdownModule,
      SharedModule
    ]
})
export class AppModule() { }

c-time-picker

component

jsx

import { TimePickerComponent } from '@coreui/angular-pro'

Props

Property	Default	Type
cleaner	`true`	`boolean`
Toggle visibility or set the content of the cleaner button.
dateTimeFormatOptions	`{}`	`DateTimeFormatOptions`
Sets DateTime format options including timeZone
disabled	`false`	`boolean`
Toggle the disabled state for the component.
filterHours	`undefined`	`object`
Filter available hours to pick.
filterMinutes	`undefined`	`object`
Filter available minutes to pick.
filterSeconds	`undefined`	`object`
Filter available seconds to pick.
indicator	`true`	`boolean`
Toggle visibility or set the content of the input indicator.
inputReadOnly	`false`	`boolean`
Toggle the readonly state for the component.
locale	`'default'`	`string`
Sets the default locale for components. If not set, it is inherited from the browser.
placeholder	`'Select time'`	`string`
Specifies a short hint visible in time input.
seconds	`false`	`boolean`
Toggle seconds visibility.
size	`undefined`	`''`, `'sm'`, `'lg'`
Size the component small or large.
time	`undefined`	`Date`
Initially selected time.
valid	`undefined`	`boolean`
Toggle visual validation feedback.
variant	`'roll'`	`'roll'`, `'select'`
Set the time picker variant to a roll or select.
visible	`false`	`boolean`
Toggle the visibility of dropdown timepicker menu component.

Events

Event name

Event name
timeChange
Event emitted on `time` change. `$event` `Date \| undefined`

timeChange

Event emitted on time change.

$event Date | undefined