Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

This Component is a part of CoreUI PRO for Angular, an advanced UI library offering over 100 components designed for creating responsive, sleek, and powerful applications. Experience it yourself by signing up for a complimentary 7-day trial.

Start Free Trial

Angular Time Picker Component

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

## Examples

### 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.

### with Footer

## 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

### Template-driven

--- ## API reference ### TimePicker Module ```typescript 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` |