TimePicker 时间选择

使用场景

当用户需要输入一个时间，可以点击标准输入框。

示例

基本示例

inline

() => ( <Group> <TimePicker onChange={console.log} /> <TimePicker defaultValue="12:30:00" onChange={console.log} /> </Group> )

() => (
  <Group>
    <TimePicker onChange={console.log} />
    <TimePicker defaultValue="12:30:00" onChange={console.log} />
  </Group>
)

快捷选择

快捷选择允许用户提供一组预置的时间选项，供用户进行快捷选择。

inline

() => ( <Group> <TimePicker mode="simple" onChange={console.log} /> </Group> )

() => (
  <Group>
    <TimePicker mode="simple" onChange={console.log} />
  </Group>
)

自定义时间列表

inline

() => { const items = []; let i = 9; while (i < 22) { const key = i < 10 ? `0${i}` : i; items.push({ label: `${key}:00`, value: `${key}:00` }); i++; } return ( <Group> <TimePicker getHourItems={() => [8, 9, 10, 11, 12].map((item) => ({ label: item, value: item }))} getMinuteItems={() => [0, 15, 30, 45].map((item) => ({ label: item, value: item }))} getSecondItems={() => [0, 59].map((item) => ({ label: item, value: item }))} /> <TimePicker mode="simple" getQuickItems={() => items} /> </Group> ); }

() => {
  const items = [];

  let i = 9;
  while (i < 22) {
    const key = i < 10 ? `0${i}` : i;
    items.push({ label: `${key}:00`, value: `${key}:00` });
    i++;
  }

  return (
    <Group>
      <TimePicker
        getHourItems={() => [8, 9, 10, 11, 12].map((item) => ({ label: item, value: item }))}
        getMinuteItems={() => [0, 15, 30, 45].map((item) => ({ label: item, value: item }))}
        getSecondItems={() => [0, 59].map((item) => ({ label: item, value: item }))}
      />
      <TimePicker mode="simple" getQuickItems={() => items} />
    </Group>
  );
}

自定义时间面板

inline

() => ( <Group> <TimePicker hasSeconds={false} format="HH:mm" /> </Group> )

() => (
  <Group>
    <TimePicker hasSeconds={false} format="HH:mm" />
  </Group>
)

API

字段	描述
placeholder	string
mode	"normal" | "simple" 选择模式
format	string 时间格式
value	string
defaultValue	string
onChange	FormControlOnChangeHandler<string>
status	string 输入框状态
popupProps	Omit<PopupProps, "children"> 弹层属性
className	string
style	CSSProperties
getHourItems	() => ListNode<number>[] 设置小时选项列表
getMinuteItems	() => ListNode<number>[] 设置分钟选项列表
getSecondItems	() => ListNode<number>[] 设置秒钟选项列表
getQuickItems	() => ListNode<string>[] 设置快捷列表
hasSeconds	boolean 显示秒钟列表
hasMinutes	boolean 显示分钟列表
hasHours	boolean 显示小时列表