AI要約
日付/時刻フィールドで特定の日付の利用可能な時刻オプションを制限しますか？デフォルトでは、WPFormsの日付/時刻フィールドでは、フォームビルダーの設定を使用して一般的な時刻範囲を設定できます。ただし、特定の1日の特別な時刻制限（たとえば、休日の短い受け取り時間）を強制する必要がある場合は、簡単な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:00から午後5:00まで時刻を選択できます。
- 2025年10月4日は、範囲が午前11:00から午後2:00に縮小されます。
必ず置き換えてください:
815をフォームIDに置き換えます。12を日付/時刻フィールドIDに置き換えます
これらを見つける方法がわからない場合は、フォームIDとフィールドIDの場所を見つける方法に関するガイドを確認してください。
これで完了です！WPFormsの日付/時刻フィールドで特定の日付の条件付き時刻制限を正常に設定しました。
特定の期間を完全にブロックすることもしたいですか？日付/時刻フィールドの日付オプションをカスタマイズする方法に関するチュートリアルを確認してください。