DateTimePicker 是一个渲染日历和时钟以选择日期和时间的 React 组件。可以分别使用 DatePicker 和 TimePicker 组件单独访问日历和时钟组件。
最佳实践
日期选择器应：
- 使用智能默认值并高亮显示当前日期。
用法
渲染 DateTimePicker。
import { useState } from 'react';
import { DateTimePicker } from '@wordpress/components';
const MyDateTimePicker = () => {
const [ date, setDate ] = useState( new Date() );
return (
<DateTimePicker
currentDate={ date }
onChange={ ( newDate ) => setDate( newDate ) }
is12Hour={ true }
/>
);
};
Props
该组件接受以下 props：
currentDate: Date | string | number | null
初始化时的当前日期和时间。可以选择传入 null 值以指定当前未选择任何日期。
- 是否必需：否
- 默认值：今天的日期
onChange: ( date: string | null ) => void
当选中新的日期或时间时调用的函数。它将 currentDate 作为参数传递。
- 是否必需：否
is12Hour: boolean
是否使用 12 小时制时钟。在 12 小时制下，将显示 AM/PM 小部件，并且假设时间格式为 MM-DD-YYYY（与默认格式 DD-MM-YYYY 相对）。
- 类型：
bool - 是否必需：否
- 默认值：false
dateOrder: ‘dmy’ | ‘mdy’ | ‘ymd’
日、月和年的顺序。此 prop 会覆盖由 is12Hour prop 确定的时间格式。
- 类型：
string - 是否必需：否
- 默认值：
'dmy'
isInvalidDate: ( date: Date ) => boolean
一个回调函数，接收代表某一天的 Date 对象作为参数，并应返回一个布尔值以表示该天是否有效。
- 是否必需：否
onMonthPreviewed: ( date: string ) => void
在日期选择器中选择上一个月/下一个月时调用的回调。该回调接收 ISO 格式的新月份日期作为参数。
- 是否必需：否
events: { date: Date }[]
要在日期选择器中显示的事件列表。每个事件将在事件发生的那一天显示为一个点。
- 类型：
Array - 是否必需：否
startOfWeek: number
一周应从哪一天开始。0 代表星期日，1 代表星期一，依此类推。
- 是否必需：否
- 默认值：0