DateTime

ベストプラクティス

日付ピッカーは次のようにするべきです:

• スマートなデフォルトを使用し、現在の日付を強調表示します。
  

使用法

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 }
   />
   );
};

プロパティ

コンポーネントは次のプロパティを受け入れます:

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’

日、月、年の順序。このプロパティはis12Hourプロパティによって決定された時刻形式を上書きします。

• 型: string
• 必須: いいえ
• デフォルト: 'dmy'
  

isInvalidDate: ( date: Date ) =

> boolean

日を表すDateオブジェクトを引数として受け取り、その日が有効かどうかを示すBooleanを返すコールバック関数です。

• 必須: いいえ
  

onMonthPreviewed: ( date: Date ) =

> void

日付ピッカーで前の月または次の月を選択するときに呼び出されるコールバック。コールバックは新しい月の日付をISO形式で引数として受け取ります。

• 必須: いいえ
  

events: { date: Date }[]

日付ピッカーに表示するイベントのリスト。各イベントはイベントの日にドットとして表示されます。

• 型: Array
• 必須: いいえ
  

startOfWeek: number

週の開始日。日曜日は0、月曜日は1など。

• 必須: いいえ
• デフォルト: 0