---
localeCode: en-US
order: 30
category: Input
title: TimePicker
subTitle: TimePicker
icon: doc-timepicker
brief: Users can easily select a compliant, formatted point of time using the time selector.
---
## When to Use
When users need to enter a time, they can click on the standard input box and pop up the time panel to select.
## Demos
### How to import
```jsx import
import { TimePicker } from '@douyinfe/semi-ui';
```
### Basic Usage
Click TimePicker, and then you can select or enter a time in the floating layer.
```jsx live=true
import React from 'react';
import { TimePicker } from '@douyinfe/semi-ui';
function Demo() {
return ;
}
```
### With an Embedded Label
```jsx live=true
import React from 'react';
import { TimePicker } from '@douyinfe/semi-ui';
function Demo() {
return ;
}
```
### Controlled Component
When using `value` And not. `defaultValue` When used as a controlled component.`value` and `onChange` It needs to be used in conjunction.
```jsx live=true
import React from 'react';
import { TimePicker } from '@douyinfe/semi-ui';
class Demo extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
this.onChange = this.onChange.bind(this);
}
onChange(time) {
console.log(time);
this.setState({ value: time });
}
render() {
return ;
}
}
```
### Different Format
The columns in the TimePicker float will follow `format` Change, when omitted `format` At some point, the corresponding column in the floating layer will also disappear.
NOTE: `format` Follow the date-fns `format` Format. https://date-fns.org/v2.0.0/docs/format
```jsx live=true
import React from 'react';
import { TimePicker } from '@douyinfe/semi-ui';
function Demo() {
return ;
}
```
### Set Panel Header and Footer
```jsx live=true
import React, { useState } from 'react';
import { TimePicker, Button } from '@douyinfe/semi-ui';
function Demo() {
const [open, setOpen] = useState(false);
const closePanel = () => setOpen(false);
const onOpenChange = open => {
setOpen(open);
console.log(open);
};
return (
close}
/>
);
}
```
### Disable Time Selection
```jsx live=true
import React from 'react';
import { TimePicker } from '@douyinfe/semi-ui';
function Demo() {
return ;
}
```
### Set Step Length
Available `Hour Step`, `Minute Step`, `Second Step` Show the optional minutes and seconds by step.
```jsx live=true
import React from 'react';
import { TimePicker } from '@douyinfe/semi-ui';
function Demo() {
return ;
}
```
### 12-hour System
12-hour time selector, default `format` for `h:mm:ss a`, an incoming `format` The format must be in [dateFns date format](https://date-fns.org/v2.0.0/docs/format)Within range.
> For example, the default 12-hour format string is:`a h:mm:ss`, if passed in `A h:mm:ss` This will result in an inability to format correctly.
```jsx live=true
import React from 'react';
import { TimePicker } from '@douyinfe/semi-ui';
function Demo() {
return (
);
}
```
### Time Range
**Version:** > = 0.23.0
Pass type = "timeRange" to enable time range selection.
```jsx live=true
import React from 'react';
import { TimePicker } from '@douyinfe/semi-ui';
function Demo() {
return (
);
}
```
### Custom Trigger
**Version:** >=0.34.0
By default we use the `Input` component as the trigger for the `DatePicker` component. You can customize this trigger by passing the `triggerRender` method.
```jsx live=true hideInDSM
import React, { useState, useMemo } from 'react';
import * as dateFns from 'date-fns';
import { TimePicker, Button } from '@douyinfe/semi-ui';
import { IconChevronDown, IconClose } from '@douyinfe/semi-icons';
function Demo() {
const formatToken = 'HH:mm:ss';
const [time, setTime] = useState(new Date());
const triggerIcon = useMemo(() => {
return time ? (
{
e && e.stopPropagation();
setTime();
}}
/>
) : (
);
}, [time]);
return (
setTime(time)}
triggerRender={({ placeholder }) => (
)}
/>
);
}
```
## TimeZone Config
Semi All configuration about time zone is converged in [ConfigProvider](/en-US/other/configprovider)
```jsx live=true hideInDSM
import React, { useMemo, useState } from 'react';
import { ConfigProvider, Select, TimePicker } from '@douyinfe/semi-ui';
function Demo(props = {}) {
const [timeZone, setTimeZone] = useState('GMT+08:00');
const defaultTimestamp = 1581599305265;
const gmtList = useMemo(() => {
const list = [];
for (let hourOffset = -11; hourOffset <= 14; hourOffset++) {
const prefix = hourOffset >= 0 ? '+' : '-';
const hOffset = Math.abs(parseInt(hourOffset, 10));
list.push(`GMT${prefix}${String(hOffset).padStart(2, '0')}:00`);
}
return list;
}, []);
return (