On this page

This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

Angular Time Picker Component

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

Examples

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

@Component({
  selector: 'docs-time-picker01',
  templateUrl: './time-picker01.component.html',
  standalone: true,
  imports: [
    RowComponent,
    ColComponent,
    TimePickerComponent
  ]
})
export class TimePicker01Component {

  time? = new Date();

}

Sizing

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

Disabled

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

Readonly

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

Filtered

Add filter callback functions to limit selectable values.

5:00 PM

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

@Component({
  selector: 'docs-time-picker05',
  templateUrl: './time-picker05.component.html',
  standalone: true,
  imports: [RowComponent, ColComponent, TimePickerComponent, DatePipe]
})
export class TimePicker05Component {

  filterHours = (hour: number): boolean => (hour > 8 && hour <= 23);
  filterMinutes = (min: number): boolean => ((min %= 10) === 0);
  filterSeconds = (sec: number): boolean => ((sec %= 15) === 0);

  time? = new Date();

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

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

@Component({
  selector: 'docs-time-picker06',
  templateUrl: './time-picker06.component.html',
  standalone: true,
  imports: [RowComponent, ColComponent, TimePickerComponent, TemplateIdDirective, ButtonDirective, DropdownCloseDirective]
})
export class TimePicker06Component {

  time? = new Date();

}

Non-english locale

Auto

Chinese

Japanese

Korean

Hebrew

Persian

Forms

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

Reactive

Form value: { "timePicker": "2025-06-17T09:15:00.000Z" }
timePicker value: 11:15:00 AM

Template-driven

Form value: { "timePicker": "2025-06-17T11:15:00.000Z" }
timePicker value: 13:15

API reference

TimePicker Module

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

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

c-time-picker

component

Inputs

name	description	type	default
`time`	Initial selected time.	`Date`	undefined
`cleaner`	Toggle visibility or set the content of the cleaner button.	`boolean`	true
`disabled`	Toggle the disabled state for the component.	`boolean`	false
`indicator`	Toggle visibility or set the content of the input indicator.	`boolean`	true
`inputReadOnly`	Toggle the readonly state for the input.	`boolean`	false
`locale`	Sets the default locale for components. If not set, it is inherited from the browser.	`string`	default
`placeholder`	Specifies hint visible in time input.	`string`	Select date
`seconds`	Toggle seconds visibility.	`boolean`	false
`size`	Size the component input small or large.	`sm` \| `lg`	undefined
`valid`	Set input validation visual feedback.	`boolean`	undefined
`variant`	Set the time picker variant to a roll or select.	`roll` \| `select`	roll
`visible`	Toggle the visibility of dropdown menu component.	`boolean`	false
`filterHours`	Available hours to pick filter function.	`(value: number) => boolean`	undefined
`filterMinutes`	Available minutes to pick filter function.	`(value: number) => boolean`	undefined
`filterSeconds`	Available seconds to pick filter function.	`(value: number) => boolean`	undefined

Outputs

name	description	type
`timeChange`	Event emitted on `time` change	`Date` \| `undefined`