Question

我正在使用两个jQuery日期选择器，以便用户可以预订某些东西，在选择了两个选择器时，会显示一个名为request的按钮。有没有人知道如何通过不显示请求按钮而是显示错误消息来阻止有人试图通过禁用日期进行预订？即如果选择从 3月13日开始，那么只要到日期是3月15日，即3月14日被禁用，就不会显示请求按钮。

希望这是有道理的。

enter image description here

从我的数据库中调用已禁用的日期，并将其存储在名为scheduledDays的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("");
});

正如您所看到的，我们在这里做的是使用＆＃34; FROM＆＃34;设置全局变量。 datepicker，然后在＆＃34; TO＆＃34; datepicker，我们循环直到我们达到一个禁用日期，从那时起我们设置全局变量＆＃34; cascade＆＃34;将所有未来日期级联为禁用，实际上无法预订包含禁用日期的日期范围。

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

1 个答案: