最近在其他的validation完成后，发现了一个不怎么好解决的问题，请教一下大家。
在js加载日历后选择日期，按照常理说第二希望日时不可能在第一希望日只前，但是目前状况没能阻挡这一事件发生
想请教一下如何防止其出现,在选择一个日期之后，在被选择日期之前的日期全部无法选中等等
谢谢
目前部分代码情况如下:
var duplicationFlg = false;
if(datetime == $('input[name="datetime1"]').val()){
alert('第1希望日時に同じ日時が選択されています。');
duplicationFlg = true;
}else if(datetime == $('input[name="datetime2"]').val()){
alert('第2希望日時に同じ日時が選択されています。');
duplicationFlg = true;
}else if(datetime == $('input[name="datetime3"]').val()){
alert('第3希望日時に同じ日時が選択されています。');
duplicationFlg = true;
}
if(duplicationFlg === false){
$('#hope_middle_area').html('');
if(!$('input[name="datetime1"]').val()){
datetime1 = datetime;
datetime2 = $('input[name="datetime2"]').val();
datetime3 = $('input[name="datetime3"]').val();
$('input[name="datetime1"]').val(datetime);
}else if (!$('input[name="datetime2"]').val()){
datetime1 = $('input[name="datetime1"]').val();
datetime2 = datetime;
datetime3 = $('input[name="datetime3"]').val();
$('input[name="datetime2"]').val(datetime);
}else if (!$('input[name="datetime3"]').val()){
datetime1 = $('input[name="datetime1"]').val();
datetime2 = $('input[name="datetime2"]').val();
datetime3 = datetime;
$('input[name="datetime3"]').val(datetime);
}else{
datetime1 = $('input[name="datetime1"]').val();
datetime2 = $('input[name="datetime2"]').val();
datetime3 = $('input[name="datetime3"]').val();
}
var link1 = datetime1 ? '<a href="javascript:void(0);" onclick="clickDeleteDate(1,1);">削除</a>' : '';
var link2 = datetime2 ? '<a href="javascript:void(0);" onclick="clickDeleteDate(2,1);">削除</a>' : '';
var link3 = datetime3 ? '<a href="javascript:void(0);" onclick="clickDeleteDate(3,1);">削除</a>' : '';
var radio1 = datetime1 ? '<p id="lesson_area1"> レッスン方法：<input type="radio" id="lesson_school1" name="lesson1" value="1"><label for="lesson_school1">通学</label> <input type="radio" id="lesson_online1" name="lesson1" value="2"><label for="lesson_online1">オンライン</label></p>' : '';
var radio2 = datetime2 ? '<p id="lesson_area2"> レッスン方法：<input type="radio" id="lesson_school2" name="lesson2" value="1"><label for="lesson_school2">通学</label> <input type="radio" id="lesson_online2" name="lesson2" value="2"><label for="lesson_online2">オンライン</label></p>' : '';
var radio3 = datetime3 ? '<p id="lesson_area3"> レッスン方法：<input type="radio" id="lesson_school3" name="lesson3" value="1"><label for="lesson_school3">通学</label> <input type="radio" id="lesson_online3" name="lesson3" value="2"><label for="lesson_online3">オンライン</label></p>' : '';
var html = '';
html += '<p id="error_lesson_type" class="error_item text-center"></p>'
html += '<p id="hope_datetime1">第1希望日時：<span>' + displayDatetime(datetime1) + '</span> ' + link1 + radio1 + '</p>';
html += '<p id="hope_datetime2">第2希望日時：<span>' + displayDatetime(datetime2) + '</span> ' + link2 + radio2 + '</p>';
html += '<p id="hope_datetime3">第3希望日時：<span>' + displayDatetime(datetime3) + '</span> ' + link3 + radio3 + '</p>';
html += '<p class="date_attention">※第1、第2希望日時は必須項目</p>';
$('#hope_middle_area').append(html);
$('#hope_middle_area').fadeIn('slow');
if($('input[name="lesson_type1"]').val()){
var type = ($('input[name="lesson_type1"]').val() == 1) ? 'school' : 'online';
$('#lesson_' + type + '1').attr('checked', true);
}
if($('input[name="lesson_type2"]').val()){
var type = ($('input[name="lesson_type2"]').val() == 1) ? 'school' : 'online';
$('#lesson_' + type + '2').attr('checked', true);
}
if($('input[name="lesson_type3"]').val()){
var type = ($('input[name="lesson_type3"]').val() == 1) ? 'school' : 'online';
$('#lesson_' + type + '3').attr('checked', true);
}
var targetOffset = ($("#hope_middle_area").offset().top) - 60;
if(datetime1 && datetime2){
$('html,body').animate({scrollTop: targetOffset}, 1000);
}
}
<script src="/js/trial.js?20210208"></script>
<script>
$(function(){
// カレンダー設定
getCalendar();
// 「戻る」遷移用
var datetime1 = "<?php echo isset($_SESSION['datetime1']) ? $_SESSION['datetime1'] : null; ?>";
var datetime2 = "<?php echo isset($_SESSION['datetime2']) ? $_SESSION['datetime2'] : null; ?>";
var datetime3 = "<?php echo isset($_SESSION['datetime3']) ? $_SESSION['datetime3'] : null; ?>";
var datetimeType = "<?php echo isset($_SESSION['datetime_type']) ? $_SESSION['datetime_type'] : null; ?>";
var tutorType = "<?php echo isset($_SESSION['tutor_type']) ? $_SESSION['tutor_type'] : null; ?>";
var lessonType1 = "<?php echo isset($_SESSION['lesson_type1']) ? $_SESSION['lesson_type1'] : null; ?>";
var lessonType2 = "<?php echo isset($_SESSION['lesson_type2']) ? $_SESSION['lesson_type2'] : null; ?>";
var lessonType3 = "<?php echo isset($_SESSION['lesson_type3']) ? $_SESSION['lesson_type3'] : null; ?>";
$('input[name="datetime_type"]').val(datetimeType);
$('input[name="lesson_type1"]').val(lessonType1);
$('input[name="lesson_type2"]').val(lessonType2);
$('input[name="lesson_type3"]').val(lessonType3);
if(datetimeType){
// 仮予約の場合
if(datetimeType == 1){
clickDatetime(datetime1, datetimeType);
if(datetime2){
setTimeout(function(){
clickDatetime(datetime2, datetimeType);
},250);
}
if(datetime3){
setTimeout(function(){
clickDatetime(datetime3, datetimeType);
},500);
}
// 本予約の場合
}else if(datetimeType == 2){
clickDatetime(datetime1, datetimeType);
if(tutorType){
setTimeout(function(){
clickTutorType(tutorType);
},1000);
}
}
}
});
</script>
