Question

我有一个datetimepicker代码，用于酒店预订，我会在今天之前的所有日期和预订日期之前阻止。我有两个datetimepicker输入，第一个datetimepicker用于checkin，第二个用于checkout

它的工作正常，但如果我让我们说：4月20日作为封锁日，我从1到22选择签到，然后我仍然选择了第20天。

 <script type="text/javascript">
 $(window).load(function(){
 $(document).ready(function () {
var arrDisabledDates = {};
arrDisabledDates[new Date('03/22/2018')] = new Date('03/22/2018');
arrDisabledDates[new Date('04/20/2018')] = new Date('04/20/2018');
arrDisabledDates[new Date('05/16/2018')] = new Date('05/16/2018');
arrDisabledDates[new Date('06/30/2018')] = new Date('06/30/2018');

$('#dt2').datepicker({
    dateFormat: "yy-mm-dd",
            minDate:  0, 
    inline: true,
     beforeShowDay: function (dt) {
        var bDisable = arrDisabledDates[dt];
        if (bDisable) return [false, '', ''];
        else return [true, '', ''];
    }
});

$("#dt1").datepicker({
    dateFormat: "yy-mm-dd", 
    minDate:  0,
 inline: true,
    onSelect: function(date){            
        var date1 = $('#dt1').datepicker('getDate');           
        var date = new Date( Date.parse( date1 ) ); 
        date.setDate( date.getDate() + 1 );        
        var newDate = date.toDateString(); 
        newDate = new Date( Date.parse( newDate ) );                      
        $('#dt2').datepicker("option","minDate",newDate);            
    },
    beforeShowDay: function (dt) {
        var bDisable = arrDisabledDates[dt];
        if (bDisable) return [false, '', ''];
        else return [true, '', ''];
    }

});



});

});



</script>

登记入住：

<input type="text" name="dt1" id="dt1">

退房：

<input type="text" name="dt2" id="dt2">

再次，我的代码工作正常，但如果我说：4月20日作为封锁日，我从1到22选择签到，然后我仍然选择了第20天。

我想要做的是阻止选择第一个和第二个输入之间有阻塞日期的任何日期......

猜我正在使用jquery ui datetimepicker ..

Answer 1

如果您只是想确保在控件中未选择日期，即使用户选择了阻止日期在该范围内的范围，也可以尝试取消选择onSelect中的任何阻止日期#dt2的功能？

$('#dt2').datepicker({
        ...
        onSelect: () => { 
           for(let date in arrDisabledDates) {
               //deselect date (not sure which datetimepicker library you're using              
               $("#dt2")._clearDate(date); //example

           }
        }
        ...
});

datetimepicker块来自输入字段

1 个答案: