日付ピッカー内の年数を制限する方法

はじめに

Date Pickerフォームフィールドに表示される年を制限しますか？ このチュートリアルでは、Date Pickerで18歳以上のみを表示するように制限します。PHPを使用するとこれを簡単に実現でき、各ステップを順を追って説明します。

フォームの作成

まず、新しいフォームを作成し、1つのDateフィールドを含むフィールドを追加します。

Dateフォームフィールドを追加したら、Advancedタブをクリックし、ドロップダウンからDate TypeとしてDate Pickerを選択します。

セットアップ

次に、このスニペットをサイトにコピーする必要があります。

スニペットをサイトに追加する方法にヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

/**
 * Limit years in date picker
 *
 * @link https://wpforms.com/developers/how-to-limit-the-years-inside-your-date-picker/
 */

function wpf_dev_limit_date_picker_years() {
?>

<script type="text/javascript">

	var d = new Date();
	window.wpforms_datepicker = {

		disableMobile: true,
		// Don't allow users to pick years less than 18 years
		maxDate: d.setDate( d.getDate() - 6574 ),

	}

</script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker_years', 10 );

このスニペットにより、Date Pickerは18歳以上の人のみの生年月日を表示するように強制されます。

これで完了です！ Date Pickerで利用可能な年を制限しました。 Date Pickerで日付範囲も許可したいですか？ Date Pickerで日付範囲または複数日付を許可する方法のチュートリアルをご覧ください。

関連

アクション参照: wpforms_wp_footer_end

よくある質問

Q: Date Dropdownにも適用できますか？

A: 別のスニペットを使用して簡単に実現できます。 このチュートリアルに従って、年範囲 $args['years'] = range( 2019, 2020 ); を、希望する年の範囲を入力するように変更するだけです。

Q: 単一のフォームを対象にすることはできますか？

A: はい、単一のフォームを対象にするには、このスニペットを使用します。フォームとフィールドIDを変更することを忘れないでください。このスニペットはフォームID1279とフィールドID1であるwindow.wpforms_1279_1を使用しています。これらのIDをご自身のIDに合わせて更新する必要があります。

これらのID番号を見つけるのにヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

/**
 * Limit years in date picker for a specific form
 *
 * @link https://wpforms.com/developers/how-to-limit-the-years-inside-your-date-picker/
 */

function wpf_dev_limit_date_picker_years() {
?>
 
<script type="text/javascript">

	var d = new Date();
	window.wpforms_1279_1 = window.wpforms_1279_1 || {};
	window.wpforms_1279_1.datepicker = {

		disableMobile: true,
		// Don't allow users to pick years less than 18 years
		maxDate: d.setDate( d.getDate() - 6574 ),

	}

</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker_years', 10 );