请教一个js判断时间先后的validation问题
最近在其他的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>
datetime1~datetime3获取一次就行了，代码重复太多了，而且题主没有比较大小。改成下面的
var duplicationFlg = false;
datetime1 = $('input[name="datetime1"]').val();
datetime2 = $('input[name="datetime2"]').val();
datetime3 = $('input[name="datetime3"]').val();
if (datetime == datetime1){
alert('第1希望日時に同じ日時が選択されています。');
duplicationFlg = true;
} else if (datetime == datetime2){
alert('第2希望日時に同じ日時が選択されています。');
duplicationFlg = true;
} else if (datetime == datetime3){
alert('第3希望日時に同じ日時が選択されています。');
duplicationFlg = true;
}
if (datetime1 >= datetime2) { alert('第一日不能大于第二日！'); return false; }
if (datetime2 >= datetime3) { alert('第二日不能大于第三日！'); return false; }
//下面的代码可以省略，不需要搞这么麻烦，然后上面统一获取就行了
if(duplicationFlg === false){
$('#hope_middle_area').html('');
if(!datetime1){
datetime1 = datetime;
//datetime2 = $('input[name="datetime2"]').val();
/datetime3 = $('input[name="datetime3"]').val();
$('input[name="datetime1"]').val(datetime);
} else if (!datetime2){
//datetime1 = $('input[name="datetime1"]').val();
datetime2 = datetime;
//datetime3 = $('input[name="datetime3"]').val();
$('input[name="datetime2"]').val(datetime);
} else if (!datetime3){
///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);
}
}
有帮助麻烦点个【采纳该答案】，谢谢~~有其他问题可以继续交流~
这种方式，校验需要依赖你使用的日历插件。
思路可以是，先放开第一个日期选择，第二个日期默认为禁用状态。
第一希望日选择日期后，通过日历插件的回调函数放开第二希望日期的选择，同时利用日历插件的日期限定功能，把第一希望日选择的日期设置为第二希望日的开始日期。
前提是你使用的日历插件，可以限定日期选择范围。这样做的好处是在选择日期前就限定了日期选择范围。
如果日历插件不提供设置日期范围功能，就需要你自己控制。在日历选择完成之后，进行日期的比较，自己实现两个日期的校验，并提供提示。