フォームに表示される日付をカスタマイズしたいですか？WPFormsは日付/時刻フィールドの日付ピッカーに3つのデフォルトの日付書式を提供していますが、ニーズに合わせて簡単に書式を追加することができます。
このガイドでは、PHPを使ってカスタム日付書式を作成する方法を紹介します。
デフォルトでは、Date / TimeフィールドのDate Pickerは、3つの異なる日付フォーマットから選択できます。
カスタム日付フォーマットの設定
新しい日付フォーマットを追加するには、サイトにコードスニペットを追加する必要があります。カスタムコードの追加方法がわからない場合は、コードスニペットの追加方法のガイドをご覧ください。
/**
* Add additional formats for the Date field Date Picker
*
* @link https://wpforms.com/developers/how-to-create-additional-formats-for-the-date-field/
*/
function wpf_dev_date_field_formats( $formats ) {
// Item key is JS date character - see https://flatpickr.js.org/formatting/
// Item value is in PHP format - see http://php.net/manual/en/function.date.php
// Adds new format Monday, 20th December 2021
$formats[ 'l, J F Y' ] = 'l, jS F Y';
return $formats;
}
add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats', 10, 1 );
この日付書式では、2021年12月20日(月)という長い書式で完全な日付を入力することができます。この他の書式については、PHP の公式書式ドキュメントを参照ください。
カスタムセパレータの使用
日付の区切り文字を変更するには（例：/から-へ）、このコードを使用します：
/**
* Change date separator format
*/
function wpf_dev_date_field_formats( $formats ) {
// Adds new format 24-07-2021
$formats[ 'j-m-y' ] = 'j-m-y';
return $formats;
}
add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats', 10, 1 );
日付フォーマットに単語を追加する
日付書式に単語を含めるには（「2021年12月20日月曜日」のように）、このコードを使用します：
/**
* Add words to date format
*/
function wpf_dev_date_field_formats( $formats ) {
// Adds new format Monday, 20th of December 2021
$formats[ 'l, J \of F Y' ] = 'l, jS \of F Y';
return $formats;
}
add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats', 10, 1 );
フォームの作成
次に、フォームを作成し、フィールドを追加します。これには、日付／時間フォームフィールドを1つ追加します。
フォームの作成にサポートが必要な場合は、こちらのドキュメントをご覧ください。
日付/時刻フォームフィールドを追加したら、フィールドオプションタブをクリックし、詳細設定を選択して書式を選択し、新しい書式を選択します。
日付フィールドの日付ピッカーに追加の日付フォーマットを作成するのに必要なのはこれだけです。時間ピッカーもカスタマイズしたいですか？日付フィールドのタイムピッカーをカスタマイズする方法についてのチュートリアルをご覧ください。