Question

我正在使用bootstrap datepicker，我想在登记和结帐字段中设置一个特定范围，例如，您只能在11月5日至15日的字段中选择日期，其他字段必须被禁用这个当前的代码确实你不能在今天之前预订，并且你不能在办理登机手续的同一天结账，但我需要这个特定日期的功能。

        $(function(){
            var nowTemp = new Date();
            var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

            var checkin = $('#dpd1').datepicker({
            onRender: function(date) {
            return date.valueOf() < now.valueOf() ? 'disabled' : '';
            }
            }).on('changeDate', function(ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
            var newDate = new Date(ev.date)
            newDate.setDate(newDate.getDate() + <?php echo  $bsiCore->config['conf_min_night_booking']; ?>);
            checkout.setValue(newDate);
            //alert(newDate);
            //alert(checkout.setValue(newDate));
            }
            checkin.hide();
            $('#dpd2')[0].focus();
            }).data('datepicker');
            var checkout = $('#dpd2').datepicker({
            onRender: function(date) {
            var checkoutdt= parseInt(checkin.date.valueOf())+(60*60*24*1000*<?php echo  ($bsiCore->config['conf_min_night_booking']-1); ?>);

            return date.valueOf() <= checkoutdt ? 'disabled' : '';

            }
            }).on('changeDate', function(ev) {
            checkout.hide();
      }).data('datepicker');

Answer 1

您可以使用datepicket属性minDate作为签入日期，即在您的情况下可以使用11th may和maxDate到新Date（）或者在您的情况下使用5月15日。

$('#dpd1').datepicker({
  minDate: new Date(2016, 05 - 1, 11),
  maxDate: new Date()
});

$('#dpd2').datepicker({
  maxDate: new Date()
});

希望这可能有所帮助。

Answer 2

我为jQuery datepicker写了类似的代码，它有很多相似之处，但不一样。建立起来。

$('input').datepicker({
        beforeShowDay: function (date) {
            var endDate = new Date(2017, 4, 15);
            var startDate = new Date(2017, 4, 11);
            if (date >= startDate && date <= endDate) {
                return [false, 'my-custom-class', '']; //between 11 and 15
//Set to true, and it will only apply a class to those days but allow any days to be selected
            }

            return [true, '', '']; //Default return
        }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<input type='text' value=''/>

https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#beforeshowday

jQuery datepicker，选择

2 个答案: