Basic
Under Control
Three Sizes
disabled
Hour and minute
interval option
Addon
12 hours
Time Range Picker
Bordered-less
Status
API

TimePicker

By clicking the input box, you can select a time from a popup panel.

Examples

Click TimePicker, and then we could select or input a time in panel.

TypeScript
JavaScript
import { TimePicker } from 'infrad';
import type { Moment } from 'moment';
import moment from 'moment';
import React from 'react';

const onChange = (time: Moment, timeString: string) => {
  console.log(time, timeString);
};

const App: React.FC = () => (
  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
);

export default App;

Three Sizes

The input box comes in three sizes. large is used in the form, while the medium size is the default.

TypeScript
JavaScript
import { TimePicker } from 'infrad';
import moment from 'moment';
import React from 'react';

const App: React.FC = () => (
  <>
    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
  </>
);

export default App;

Hour and minute

While part of format is omitted, the corresponding column in panel will disappear, too.

TypeScript
JavaScript
import { TimePicker } from 'infrad';
import moment from 'moment';
import React from 'react';

const format = 'HH:mm';

const App: React.FC = () => <TimePicker defaultValue={moment('12:08', format)} format={format} />;

export default App;

Addon

Render addon contents to time picker panel's bottom.

TypeScript
JavaScript
import { Button, TimePicker } from 'infrad';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [open, setOpen] = useState(false);

  return (
    <TimePicker
      open={open}
      onOpenChange={setOpen}
      renderExtraFooter={() => (
        <Button size="small" type="primary" onClick={() => setOpen(false)}>
          OK
        </Button>
      )}
    />
  );
};

export default App;

Time Range Picker

Use time range picker with TimePicker.RangePicker.

TypeScript
JavaScript
import { TimePicker } from 'infrad';
import React from 'react';

const App: React.FC = () => <TimePicker.RangePicker />;

export default App;

Status

Add status to TimePicker with status, which could be error or warning.

TypeScript
JavaScript
import { Space, TimePicker } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <Space direction="vertical">
    <TimePicker status="error" />
    <TimePicker status="warning" />
    <TimePicker.RangePicker status="error" />
    <TimePicker.RangePicker status="warning" />
  </Space>
);

export default App;

4.19.0

Under Control

value and onChange should be used together,

TypeScript
JavaScript
import { TimePicker } from 'infrad';
import type { Moment } from 'moment';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [value, setValue] = useState<Moment | null>(null);

  const onChange = (time: Moment) => {
    setValue(time);
  };

  return <TimePicker value={value} onChange={onChange} />;
};

export default App;

disabled

A disabled state of the TimePicker.

TypeScript
JavaScript
import { TimePicker } from 'infrad';
import moment from 'moment';
import React from 'react';

const App: React.FC = () => <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />;

export default App;

interval option

Show stepped options by hourStep minuteStep secondStep.

TypeScript
JavaScript
import { TimePicker } from 'infrad';
import React from 'react';

const App: React.FC = () => <TimePicker minuteStep={15} secondStep={10} />;

export default App;

12 hours

TimePicker of 12 hours format, with default format h:mm:ss a.

TypeScript
JavaScript
import { TimePicker } from 'infrad';
import type { Moment } from 'moment';
import React from 'react';

const onChange = (time: Moment, timeString: string) => {
  console.log(time, timeString);
};

const App: React.FC = () => (
  <>
    <TimePicker use12Hours onChange={onChange} />
    <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} style={{ width: 140 }} />
    <TimePicker use12Hours format="h:mm a" onChange={onChange} />
  </>
);

export default App;

Bordered-less

Bordered-less style component.

TypeScript
JavaScript
import { TimePicker } from 'infrad';
import React from 'react';

const { RangePicker } = TimePicker;

const App: React.FC = () => (
  <>
    <TimePicker bordered={false} />
    <RangePicker bordered={false} />
  </>
);

export default App;

API#

import moment from 'moment';

<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;

Property	Description	Type	Default	Version
allowClear	Whether allow clearing text	boolean	true
autoFocus	If get focus when component mounted	boolean	false
bordered	Whether has border style	boolean	true
className	The className of picker	string	-
clearIcon	The custom clear icon	ReactNode	-
clearText	The clear tooltip of icon	string	clear
defaultValue	To set default time	moment	-
disabled	Determine whether the TimePicker is disabled	boolean	false
disabledTime	To specify the time that cannot be selected	DisabledTime	-	4.19.0
format	To set the time format	string	`HH:mm:ss`
getPopupContainer	To set the container of the floating layer, while the default is to create a div element in body	function(trigger)	-
hideDisabledOptions	Whether hide the options that can not be selected	boolean	false
hourStep	Interval between hours in picker	number	1
inputReadOnly	Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices)	boolean	false
minuteStep	Interval between minutes in picker	number	1
open	Whether to popup panel	boolean	false
placeholder	Display when there's no value	string \| [string, string]	`Select a time`
placement	The position where the selection box pops up	`bottomLeft` `bottomRight` `topLeft` `topRight`	bottomLeft
popupClassName	The className of panel	string	-
popupStyle	The style of panel	CSSProperties	-
renderExtraFooter	Called from time picker panel to render some addon to its bottom	() => ReactNode	-
secondStep	Interval between seconds in picker	number	1
showNow	Whether to show `Now` button on panel	boolean	-	4.4.0
status	Set validation status	'error' \| 'warning' \| 'success' \| 'validating'	-	4.19.0
suffixIcon	The custom suffix icon	ReactNode	-
use12Hours	Display as 12 hours format, with default format `h:mm:ss a`	boolean	false
value	To set time	moment	-
onChange	A callback function, can be executed when the selected time is changing	function(time: moment, timeString: string): void	-
onOpenChange	A callback function which will be called while panel opening/closing	(open: boolean) => void	-
onSelect	A callback function, executes when a value is selected	function(time: moment): void	-

DisabledTime#

type DisabledTime = (now: Moment) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};

Methods#

Name	Description	Version
blur()	Remove focus
focus()	Get focus

RangePicker#

Same props from RangePicker of DatePicker. And includes additional props:

Property	Description	Type	Default	Version
disabledTime	To specify the time that cannot be selected	RangeDisabledTime	-	4.19.0
order	Order start and end time	boolean	true	4.1.0

RangeDisabledTime#

type RangeDisabledTime = (
  now: Moment,
  type = 'start' | 'end',
) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};

FAQ#

How to use TimePicker with customize date library like dayjs