AI要約
日付ピッカーをデフォルトの日付で読み込みますか？ 日付ピッカー形式を日付/時刻フォームフィールドで使用すると、ポップアップウィンドウから簡単に日付を選択できます。しかし、このフィールドのデフォルトの日付を、今日の日付から簡単に設定できることもご存知でしたか？このチュートリアルでは、その方法を説明します。
日付ピッカーフィールドを制限するためにコードスニペットを使用している場合は、フォームビルダーの制限オプションをすべてオフにする必要があることに注意することが重要です。
フォームの作成
まず、フォームを作成し、日付/時刻フォームフィールドをフォームに追加する必要があります。詳細設定タブで、タイプに日付ピッカーが選択されていることを確認してください。
フォームの作成についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。
このチュートリアル内のコードスニペットの例は、単一使用の例専用であることに注意してください。これらのコードスニペットを複数同時に使用する予定がある場合は、各関数名が一意であることを確認するか、すべてを1つの関数にまとめる必要があります。
デフォルトの日付の設定
いずれかのスニペットを使用するには、コピーしてサイトに貼り付ける必要があります。サイトにスニペットを追加する方法がわからない場合は、こちらのチュートリアルをご覧ください。
すべてのデートピッカーにコードスニペットを追加する
/**
* Set today's date as default date for all date pickers.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
defaultDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
特定のフォーム内のデートピッカーにコードスニペットを追加する
特定のフォーム内の日付ピッカーのデフォルトの日付を設定するには、このスニペットを使用できますが、_1287を自分のフォームIDに合わせて変更してください。フォームIDの見つけ方がわからない場合は、こちらのチュートリアルをご覧ください。
/**
* Set today's date as default date for all date pickers inside the specific form.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
// Run this on all date pickers inside the form ID 1287
window.wpforms_1287 = window.wpforms_1287 || {};
window.wpforms_1287.datepicker = {
defaultDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
特定のフォーム内の特定のデートピッカーフィールドにコードスニペットを追加する
特定のフォーム内の特定のフィールドのデフォルトの日付を設定するには、このスニペットを使用できますが、_1287を自分のフォームIDに合わせて変更し、_4をフィールドIDに合わせて更新してください。フォームIDの見つけ方がわからない場合は、こちらのチュートリアルをご覧ください。
/**
* Set today's date as default date for a specific date picker inside a specific form.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
// Run this on the date field ID 4 inside the form ID 1287
window.wpforms_1287_4 = window.wpforms_1287_4 || {};
window.wpforms_1287_4.datepicker = {
defaultDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
これで、デフォルトの日付を設定するために必要なすべてが揃いました。ページが読み込まれると、日付フィールドに自動的に今日の日付が読み込まれます。
日付ピッカーで日付の範囲や複数の日付を選択できるようにする方法も知りたいですか？ 日付ピッカーで日付範囲または複数日付を許可する方法の記事をご覧ください。
参照アクション
よくある質問
カスタムCSSクラス名でデフォルトの日付を設定できますか？
回答：もちろんです！まず、詳細設定タブから日付/時刻フォームフィールドにクラス名を追加したことを確認してください。
この例では、使用しているCSSクラス名はcustomdatecodeです。
フォームのCSSクラス名を保存したら、このコードスニペットをサイトに追加してください。
/**
* Set today's date as default date for all date pickers from a CSS class name.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
jQuery( '.customdatecode' ).each( function () {
var form = jQuery( this ).closest( '.wpforms-form' ),
formID = form.data( 'formid' ),
fieldID = jQuery(this).data('field-id' );
window['wpforms_' + formID + '_' + fieldID] = {
datepicker: {
defaultDate: 'today',
disableMobile: 'true'
}
}
} );
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
これで、そのCSSクラス名を持つ日付ピッカーが含まれる任意のフォームで、そのフィールドの日付として今日の日付が自動的に設定されます。
Q：モバイルデバイスでも機能しますか？
A: モバイルデバイスはOSのデフォルト機能によってすべて異なるため、モバイルデバイスから表示した場合、日付は自動的に入力されません。
Q: 現在の日付を最小日付およびデフォルト日付として設定するにはどうすればよいですか？
A: もちろんです！日付ピッカーのデフォルト日付と最小日付を今日の日付に設定するには、このスニペットを使用してください。
/**
* Set today's date as the default and minimum date for all date pickers.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
defaultDate: "today",
minDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );