Компонент DateTimePicker в библиотеке WordPress предоставляет удобный интерфейс для выбора даты и времени. Он сочетает в себе календарь и часы, позволяя пользователю легко выбрать нужный момент времени. При необходимости, можно использовать только календарь или часы, вызвав компоненты DatePicker и TimePicker соответственно.
Подключение компонента
Для использования компонента DateTimePicker, импортируйте его из библиотеки компонентов WordPress:
import { useState } from 'react';
import { DateTimePicker } from '@wordpress/components';
Базовый пример использования
Создадим базовый пример с возможностью выбора даты и времени. В этом примере используется useState для отслеживания выбранной даты, которая обновляется при каждом изменении в DateTimePicker.
const MyDateTimePicker = () => {
const [ date, setDate ] = useState(new Date());
return (
<DateTimePicker
currentDate={ date }
onChange={ (newDate) => setDate(newDate) }
is12Hour={ true }
/>
);
};
Описание пропсов
Компонент DateTimePicker поддерживает несколько параметров, которые позволяют гибко настраивать его отображение и поведение.
currentDate(опциональный)- Тип:
Date | string | number | null - Задает текущую дату и время для инициализации компонента. Можно передать
null, чтобы по умолчанию не было выбрано никакой даты. ЕслиcurrentDateне указан, по умолчанию используется текущая дата.
- Тип:
Пример использования с заданной датой:
<DateTimePicker currentDate="2024-11-15T10:30:00" />
onChange(опциональный)- Тип:
(date: string | null) => void - Функция, вызываемая при изменении даты или времени. Принимает новую дату в виде строки (ISO формат) или
null, если дата не выбрана.
- Тип:
Пример использования с функцией-обработчиком:
<DateTimePicker onChange={(newDate) => console.log("Выбранная дата:", newDate)} />
is12Hour(опциональный)- Тип:
boolean - Определяет, будет ли использоваться 12-часовой формат. При значении
trueдобавляется виджет AM/PM, и формат времени меняется на MM-DD-YYYY. По умолчанию используется 24-часовой формат с форматом даты DD-MM-YYYY.
- Тип:
Пример использования в 24-часовом формате:
<DateTimePicker is12Hour={false} />
dateOrder(опциональный)- Тип:
'dmy' | 'mdy' | 'ymd' - Позволяет установить порядок отображения дня, месяца и года. Этот параметр переопределяет формат, заданный с помощью
is12Hour.
- Тип:
Пример использования с форматом месяц-день-год:
<DateTimePicker dateOrder="mdy" />
isInvalidDate(опциональный)- Тип:
(date: Date) => boolean - Функция для определения недопустимых дат. Принимает
Dateобъект и должна возвращатьtrueдля недопустимых дат иfalseдля допустимых.
- Тип:
Пример с блокировкой всех дат до сегодняшнего дня:
<DateTimePicker isInvalidDate={(date) => date < new Date()} />
onMonthPreviewed(опциональный)- Тип:
(date: Date) => void - Функция, вызываемая при переходе к предыдущему или следующему месяцу в календаре. Получает дату нового месяца в виде
Dateобъекта.
- Тип:
Пример использования с логированием предварительного просмотра месяца:
<DateTimePicker onMonthPreviewed={(monthDate) => console.log("Просмотр месяца:", monthDate)} />
events(опциональный)- Тип:
{ date: Date }[] - Список событий, отображаемых в календаре. Для каждого события будет показана точка на соответствующем дне.
- Тип:
Пример использования с несколькими событиями:
<DateTimePicker events={[
{ date: new Date("2024-11-18") },
{ date: new Date("2024-12-25") },
]} />
startOfWeek(опциональный)- Тип:
number - Задает день, с которого начинается неделя (0 для воскресенья, 1 для понедельника и т.д.). По умолчанию неделя начинается с воскресенья (0).
- Тип:
Пример использования с началом недели в понедельник:
<DateTimePicker startOfWeek={1} />
Пример с кастомными настройками формата даты и времени
В этом примере используется 12-часовой формат с кастомным порядком отображения даты.
const CustomDateTimePicker = () => {
const [selectedDate, setSelectedDate] = useState(new Date());
return (
<DateTimePicker
currentDate={selectedDate}
onChange={(newDate) => setSelectedDate(newDate)}
is12Hour={true}
dateOrder="mdy"
/>
);
};
Пример с недопустимыми датами и событиями
Добавим настройку для блокировки выходных и отметим несколько событий.
const EventfulDateTimePicker = () => {
const [selectedDate, setSelectedDate] = useState(new Date());
return (
<DateTimePicker
currentDate={selectedDate}
onChange={(newDate) => setSelectedDate(newDate)}
isInvalidDate={(date) => date.getDay() === 0 || date.getDay() === 6}
events={[
{ date: new Date("2024-11-20") },
{ date: new Date("2024-12-01") },
]}
/>
);
};
Заключение
Компонент DateTimePicker в WordPress позволяет легко и гибко управлять выбором даты и времени. Этот компонент удобен для создания форм с календарем и часами, а также подходит для интерфейсов с ограничениями по дате или с отмеченными событиями. Настройки, такие как is12Hour, dateOrder, и isInvalidDate, позволяют подстроить компонент под любые требования вашего проекта.