Jquery Datepicker仅限于另一个日期选择器的月份和年份

Question

我有一个问题。 我需要一个datepicker，它将限制用户选择日期。

所以它是这样的：

1）首先输入，我应该能够选择我想要的任何日期，月份和年份。

2）第二个输入，如果它比第一个输入的同一个月/年大于第一个输入的那天，我应该能够选择一天。 否则警告错误。

编辑 - 代码： http ： //jsfiddle.net/wc6jcpka/

var dates = $("input[id$='startDate'], input[id$='endDate']").datepicker({
   dateFormat: 'dd/mm/yy',
   changeMonth: true,
   changeYear: true,
   onSelect: function (selectedDate) {
      var option = this.id == $("input[id$='startDate']")[0].id ? "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);
      }
   });

Answer 1

以下将根据您的要求工作：

var txtTranDate = $("#startDate");

var txtTranDateTo = $("#endDate");

txtTranDate.datepicker({
    defaultDate: 0,
    changeMonth: true,
    changeYear: true,
    dateFormat: dateFormat,
    maxDate: 0,
    numberOfMonths: 1
}).on("change", function () {
    var dcal = getDate(this);
    if (txtTranDate.val() !== '' && dcal === null) {
        txtTranDate.prop("value", "");
        txtTranDateTo.prop("value", "");
    } else {
        txtTranDateTo.datepicker("option", "minDate", getDate(this));
    }
});

txtTranDateTo.datepicker({
    defaultDate: 0,
    changeMonth: true,
    changeYear: true,
    maxDate: 0,
    dateFormat: dateFormat,
    numberOfMonths: 1
}).on("change", function () {
    var dcal = getDate(this);
    if (txtTranDateTo.val() !== '' && dcal === null) {
        txtTranDate.prop("value", "");
        txtTranDateTo.prop("value", "");
    } else {
        txtTranDate.datepicker("option", "maxDate", getDate(this));
    }
});

UPDATE检查是否输入有效日期的方法

function getDate(element) {
    var date;
    try {
        date = $.datepicker.parseDate(dateFormat, element.value);
    } catch (error) {
        date = null;
    }

    return date;
}

Answer 2

@Gaurav P给了我一个提示，但我必须做一些修改才能使代码正常工作。

这是代码：

var txtTranDate = $("input[id$='startDate']");

var txtTranDateTo = $("input[id$='endDate']");

txtTranDate.datepicker({
    defaultDate: 0,
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd/mm/yy'
}).on("change", function () {
    var date = this.value;
    var values = date.split("/");
    var lastDate = new Date(values[2], values[1] - 1, daysInMonth(values[1], values[2]));
    var formatted = $.datepicker.formatDate("dd/mm/yy", lastDate);
    txtTranDateTo.datepicker("option", "minDate", getDate(this));
    txtTranDateTo.datepicker("option", "maxDate", formatted);
});

txtTranDateTo.datepicker({
    defaultDate: 0,
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd/mm/yy',
    numberOfMonths: 1
}).on("change", function() {

});

function getDate(element) {
    var date;
    try {
        date = $.datepicker.parseDate('dd/mm/yy', element.value);
    } catch (error) {
        date = null;
    }

    return date;
}

Answer 3

这也可以，只需编辑一些代码。 http://jsfiddle.net/wc6jcpka/2/

$(function(){

var dates = $("input[id$='startDate'], input[id$='endDate']").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    onSelect: function (selectedDate) {

        var endDateInput = $("#endDate").val();
        var startDateInput = $("#startDate").val();
        if(endDateInput != '' && startDateInput != ''){
            var endDate = new Date();
            endDate.setMonth   (parseInt(endDateInput.substr(3, 6), 10) - 1);
            endDate.setDate    (parseInt(endDateInput.substr(0, 3), 10));
            endDate.setYear    (parseInt(endDateInput.substr(6, 10), 10));
            var startDate = new Date();
            startDate.setMonth   (parseInt(startDateInput.substr(3, 6), 10) - 1);
            startDate.setDate    (parseInt(startDateInput.substr(0, 3), 10));
            startDate.setYear    (parseInt(startDateInput.substr(6, 10), 10));
                if(startDate.getDate() >= endDate.getDate() || startDate.getMonth() != endDate.getMonth() || startDate.getYear() != endDate.getYear()){
                alert("Error");
                }
        }
    }
});   

}）;