AIサマリー
特定の日付の日付/時刻フィールドで利用可能な時間オプションを制限したいですか？デフォルトでは、WPFormsのDate/Timeフィールドは、フォームビルダーの設定を使用して一般的な時間範囲を設定することができます。しかし、ある特定の日付に対して特別な時間制限を行う必要がある場合 (例えば、休日のピックアップ時間を短くするなど)、小さな JavaScript スニペットを使って簡単に行うことができます。
このチュートリアルでは、ある特定の日付の利用可能な時間範囲を制限し、他のすべての日付の一般的な時間制限を維持する手順を説明します。
フォームの作成
まず、フォームを作成し、日付/時刻フィールドを追加する必要があります。
ユーザーに日付と時刻の両方を別々に選択させたい場合は、「書式」でフィールドの種類が日付/時刻に設定されていることを確認してください。
例えば、こうだ：
- 一般ピックアップ時間：午前11:00～午後5:00
- 特別日（2025年10月4日）：午前11:00～午後2:00
条件付き時間制限の追加
コードスニペットを追加する場所や方法がわからない場合は、WPFormsにカスタムPHPやJavaScriptを追加するチュートリアルをご覧ください。
add_action('wpforms_wp_footer_end',function(){?>
<script type="text/javascript">
jQuery(document).ready(function($){
var formID=815; // WPForms form ID
var fieldID=12; // WPForms field ID (Date/Time)
var dateField=$('#wpforms-'+formID+'-field_'+fieldID);
var timeField=$('#wpforms-'+formID+'-field_'+fieldID+'-time');
function updateTimeLimits(){
var selectedDate=dateField.val();
if(!selectedDate)return;
var parts=selectedDate.split('/');
var day=parseInt(parts[0],10);
var month=parseInt(parts[1],10);
var year=parseInt(parts[2],10);
var minTime='11:00';
var maxTime='17:00';
if(month===10&&day===4){maxTime='14:00';}
var today=new Date();
var selected=new Date(year,month-1,day);
if(today.toDateString()===selected.toDateString()){
var nowH=today.getHours();
var nowM=today.getMinutes();
if(nowM>0){nowH++;nowM=0;}
var currentMin=(nowH<10?'0':'')+nowH+':00';
if(currentMin>minTime){minTime=currentMin;}
}
timeField.timepicker('option',{minTime:minTime,maxTime:maxTime});
}
dateField.on('change',updateTimeLimits);
updateTimeLimits();
});
</script>
<?php},10);
このスニペットは選択された日付をチェックし、それに応じて利用可能な時間を調整する。
上の例では：
- 毎日、午前11時から午後5時まで時間選択が可能。
- 2025年10月4日は、午前11時から午後2時までとなる。
必ず交換してください：
815をフォームIDと一緒に入力してください。12日付/時刻フィールドID
これらの見つけ方がわからない場合は、フォームIDとフィールドIDの見つけ方のガイドをご覧ください。
これで完了です！これでWPFormsの日付/時間フィールドに特定の日付の条件付き時間制限を設定することができました。
特定の日付範囲を完全にブロックしたいですか？日付/時刻フィールドの日付オプションをカスタマイズする方法についてのチュートリアルをご覧ください。