时间选择器

TimePicker 是一个用于渲染时间和日期选择表单输入的 React 组件。它可以独立使用，也可以作为 DateTimePicker 组件的一部分。

注意：TimePicker 还公开了一个复合子组件 TimePicker.TimeInput，可以独立使用它来渲染时间输入字段，而无需完整的选择器 UI。

用法

渲染一个 TimePicker。

import { useState } from 'react';
import { TimePicker } from '@wordpress/components';

const MyTimePicker = () => {
    const [ time, setTime ] = useState( new Date() );

    return (
        <TimePicker
            currentTime={ time }
            onChange={ ( newTime ) => setTime( newTime ) }
            is12Hour
        />
    );
};

Props

该组件接受以下 props：

currentTime: Date | string | number | null

初始化时的当前时间。可以选择传入 null 值以指定当前未选择任何时间。

• 必填：否
• 默认值：当前时间

onChange: ( time: string ) => void

选中新时间时调用的函数。它将时间作为 ISO 格式字符串传递。

• 必填：否

is12Hour: boolean

是否使用 12 小时制时钟。在 12 小时制下，会显示 AM/PM 控件。

• 必填：否
• 默认值：false

dateOrder: ‘dmy’ | ‘mdy’ | ‘ymd’

日、月和年的顺序。此 prop 会覆盖由 is12Hour prop 确定的时间格式。

• 必填：否
• 默认值：'dmy'（当 is12Hour 为 true 时为 'mdy'）

hideLabelFromVision: boolean

是否在视觉上隐藏字段标签，同时保持其对屏幕阅读器的可访问性。

• 必填：否
• 默认值：false

TimePicker.TimeInput

一个独立的时间输入组件。值以 24 小时格式的對象形式传递（{ hours: number, minutes: number }）。

用法

import { useState } from 'react';
import { TimePicker } from '@wordpress/components';

const MyTimeInput = () => {
    const [ time, setTime ] = useState( { hours: 13, minutes: 30 } );

    return (
        <TimePicker.TimeInput
            value={ time }
            onChange={ setTime }
            label="Time"
        />
    );
};

Props

value: { hours: number, minutes: number }

24 小时格式的时间输入值。

• 必填：否

defaultValue: { hours: number, minutes: number }

当以非受控模式使用时，控件的可选默认值。如果留为 undefined，将使用当前时间。

• 必填：否

onChange: ( time: { hours: number, minutes: number } ) => void

时间变更时调用。接收包含 hours 和 minutes 的新值对象。

• 必填：否

is12Hour: boolean

是否使用 12 小时制时钟。在 12 小时制下，会显示 AM/PM 控件。

• 必填：否

label: string

时间输入的标签。

• 必填：否