如何防止用户通过 jQuery UI 日期选择器中禁用的日期进行预订？

Question

我正在使用两个 jQuery 日期选择器，以便用户可以预订一些东西，在选择两个日期选择器后，将显示一个名为请求的按钮。有谁知道我如何通过不显示请求按钮而是显示错误消息来阻止有人尝试在禁用日进行预订？即，如果选择 from 3 月 13 日，则只要 to 日期是 3 月 15 日，因为 3 月 14 日被禁用，请求按钮就不会显示。

希望这是有道理的。

正在从我的数据库调用禁用天数并存储在名为 bookedDays 的 JavaScript 变量中。

我使用的 JavaScript 代码如下：

$(document).ready(function() {

    $('#request').hide();
    $('.days').html('Please select a date range of at least the same day. <br/> <i>Max booking: 2 Months.</i>');
    $( "#from" ).datepicker({
      defaultDate: new Date(),
      changeMonth: true,
      numberOfMonths: 1,
      minDate: new Date(),
      maxDate: "+1M",
      beforeShowDay: isAvailable,
      onClose: function( selectedDate ) {
        var day = $("#from").datepicker('getDate');
day.setDate(day.getDate()+1);
        $( "#to" ).datepicker( "option", "minDate", day );

      }
    });

    $( "#to" ).datepicker({

      defaultDate: new Date(),
      changeMonth: true,
      numberOfMonths: 1,
      minDate: ("#to"),
      maxDate: ("+2M"),
      beforeShowDay: isAvailable,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });

    function isAvailable(date){
    var dateAsString = date.getFullYear().toString() + "-" + (date.getMonth()+1).toString() + "-" + date.getDate();
    var result = $.inArray( dateAsString, bookedDays ) ===-1 ? [true] : [false];
    return result;
  }


    $('#to').on('change',function(){
     var days = (daydiff(parseDate($('#from').val()), parseDate($('#to').val())));
      var cogs = $('#cogsday').html();
      cogs = cogs.replace(/\D/g,'');
      var x = days;
      var y = cogs * x;
      $('.days').html('You have chosen to borrow this item for <b>'+ days + '</b> days at a cost of <b>' + y + '</b> cogs.<br/><br/>');
        if(days){
            if (borrowercogs >= (y)) {
        $('#request').show();
      } else {
           $('#request').hide();
           $('.days').html('You have chosen to borrow this item for <b>'+ days + '</b> days at a cost of <b>' + y + '</b> cogs.<br/><i style=color:red>You do not have enough cogs to borrow for this duration.</i><br/>');
      }
        }

      $('#request').click(function() {

                var cogs = $('#cogsday').html();

                cogs = cogs.replace(/\D/g,'');

        var x = days ;

        var y = cogs * x;
        $('#total').text(y);
        $('#nameID').val(y);
        $('#days').text(days);
        $('#daysID').val(days);

        });
    })

    function parseDate(str) {
    var mdy = str.split('/')
    return new Date(mdy[2], mdy[0]-1, mdy[1]);
}

function daydiff(first, second) {
    return Math.round((second-first)/(1000*60*60*24));
}

  });

如有任何帮助，我们将不胜感激。谢谢

Answer 1

已更新

JSFIDDLE

var array = ["2015-03-14","2015-03-15","2015-03-16"]

var _selectedDay = "";
var _cascadeDisabled = false;

$('#from').datepicker({
    beforeShowDay: function(date) {
        var _date = jQuery.datepicker.formatDate('yy-mm-dd', date);
        var _isDisabledDate = array.indexOf(_date) != -1;      

        return [ array.indexOf(_date) == -1 ]
    },
    onClose: function(dateStr, event) {
        _selectedDay = dateStr;
    }
});

$('#to').datepicker({
    beforeShowDay: function(date) {
        var _date = jQuery.datepicker.formatDate('yy-mm-dd', date);
        var _isDisabledDate = array.indexOf(_date) != -1;
        if(_selectedDay.length && _isDisabledDate 
          && _selectedDay < _date) {
            _cascadeDisabled = true;
        }

        if(_cascadeDisabled) return false;

        return [ array.indexOf(_date) == -1 ]
    },
    onClose: function(dateStr, event) {
        _cascadeDisabled = false;
    }
});


$("#clear").click(function() {
    $("input[type='text']").val("");
});

如您所见，我们在这里所做的是使用 "FROM" 日期选择器设置一个全局变量，然后在 "TO" 日期选择器中，我们循环遍历直到我们遇到禁用日期，从那时起，我们设置全局变量 "cascade" 以级联所有要禁用的未来日期，有效地使得无法预订包含禁用日期的日期范围。

如何防止用户通过 jQuery UI 日期选择器中禁用的日期进行预订？

How can I prevent users making a booking though disabled dates in jQuery UI Date Pickers?

javascript

jquery

jquery-ui

datepicker