如何基于jQuery日期选择器中的某个日期禁用未来的日期

Question

我正在使用jQuery日期选择器，我有4个日期：开始日期，结束日期，发布日期和出发日期。根据开始日期，我想禁用未来的日期，直到开始日期，类似地，根据结束日期，我想从该日期禁用过去的日期。我无法这样做，尝试了许多选项，如onSelect，但我无法获得所需的禁用。以下是我的jQuery代码。

var dateToday = new Date();
var dates = $("#start_date, #end_date").datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "start_date" ? "minDate" : "maxDate",
        instance = $(this).data("datepicker"),
        date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});

$('#departure_date').datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: $('#end_date').datepicker({
        dateFormat: 'dd-mm-yy'
    }).val()
});

$('#publishing_date').datepicker({
    dateFormat: 'yy-mm-dd',
    maxDate: $('#start_date').datepicker({
        dateFormat: 'dd-mm-yy'
    }).val()
});

任何意见或帮助都欢迎。提前感谢。

另外，已经尝试了以下方法，但未成功。

$('#publishing_date').datepicker({
    dateFormat: 'yy-mm-dd',
    maxDate : ($.datepicker.formatDate('yy-mm-dd', $('#start_date').datepicker("getDate")))
});

- samjhana joshi

Answer 1

根据@Mahesh Sapkal的建议，我对我的代码进行了以下更改。

var dateToday = new Date();
var dates = $("#start_date, #end_date").datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: dateToday,
    onSelect: function(selectedDate) {
          var option = this.id == "start_date" ? "minDate" : "maxDate",
          instance = $(this).data("datepicker"),
          date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
          if(this.id == "start_date"){
                   $("#publishing_date").datepicker({
                         dateFormat: 'yy-mm-dd',
                         minDate: dateToday,
                         maxDate: date
                    });
          }
          if(this.id == 'end_date'){
                   $("#departure_date").datepicker({
                         dateFormat: 'yy-mm-dd',
                         minDate: date
                   })
          }
          dates.not(this).datepicker("option", option, date);
     }

不知道为什么，但他的建议$( "#departure_date" ).datepicker( "option", "minDate",date );对我不起作用。

- samjhana joshi

Answer 2

尝试这个。

 $("#start_date").datepicker({
dateFormat: 'dd-mm-yy',
minDate: "+0D",
onSelect: function (selectedDate) {
    var d = parseInt(selectedDate.substring(0, 2));
    var m = parseInt(selectedDate.substring(3, 5));
    var y = parseInt(selectedDate.substring(6, 10));
    var newDate = new Date(y, m - 1, d + 1);
    $("#departure_date").datepicker("option", "minDate", newDate);
}
});

$("#departure_date").datepicker({
dateFormat: 'dd-mm-yy',
minDate: "+0D",
onSelect: function (selectedDate) {
    var d = parseInt(selectedDate.substring(0, 2));
    var m = parseInt(selectedDate.substring(3, 5));
    var y = parseInt(selectedDate.substring(6, 10));
    var newDate = new Date(y, m - 1, d + 1);
    $("#publishing_date").datepicker("option", "minDate", newDate);
   }
 });

- Deepak Saralaya

---

结束日期怎么样？它应该依赖于开始日期。我该怎么做？ - samjhana joshi

在开始日期上选择后写入：$("#end_date").datepicker("option", "minDate", newDate); - Deepak Saralaya

Answer 3

在初始化后，您需要设置出发日期和发布日期。

试试这个。

 onSelect: function(selectedDate) {
        var option = this.id == "start_date" ? "minDate" : "maxDate",
        instance = $(this).data("datepicker"),
        date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);

        if(this.id === "end_date") {
            $( "#departure_date" ).datepicker( "option", "minDate",date );
        } else {
            $( "#publishing_date" ).datepicker( "option", "maxDate",date );
        }

    }

- msapkal

Answer 4

使用 beforeShowDay 选项来实现这一点。

- Chocoboboy