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 usingsize property likesize="lg" andsize="sm".

Disabled

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

Readonly

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

Filtered

Add filter callback functions to limit selectable values.

9:30 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;    }  }}

with Footer

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-10-03T09:15:00.000Z"}
timePicker value: 11:15:00 AM

Template-driven

Form value: { "timePicker": "2025-10-03T11: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`

Movatterモバイル変換