Question

以下是我目前使用的代码。它允许用户在选择开始日期之前选择结束日期。

是否可以在用户输入开始日期之前禁用结束日期选择器？

var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
$( "#conference_start_date" ).datepicker({
    showOn: "button",
    buttonImage: "/roswellpark/images/calendar_icon.png",
    buttonImageOnly: true,
    buttonText: '',
    yearRange: "-100y",
    changeYear: true,
    changeMonth:true,
    minDate: tomorrow,
    onSelect: function (date) {
        var selectedDate = new Date(date);
        var msecs = 86400000*3; // one day have 86400000 micro seconds
        var defaultSelectedDate = new Date(selectedDate.getTime() + msecs);
        var endDate =  new Date(selectedDate.getTime()+86400000);
        $("#conference_end_date").datepicker('option', 'minDate', endDate);
        $('#conference_end_date').datepicker("setDate", defaultSelectedDate);
    }
});
$("#conference_start_date").focus(function() {
    $("#conference_start_date").datepicker("show");
    $("#ui-datepicker-div").css("width", "16em");
}); 

$( "#conference_end_date" ).datepicker({
    showOn: "button",
    buttonImage: "/roswellpark/images/calendar_icon.png",
    buttonImageOnly: true,
    buttonText: '',
    yearRange: "-100y",
    changeYear: true,
    changeMonth:true
});
$("#conference_end_date").focus(function() {
    $("#conference_end_date").datepicker("show");
    $("#ui-datepicker-div").css("width", "16em");
});

Answer 1

您可以禁用和取消配置结束日期字段，直到用户提供开始日期值。然后，在回调函数中（这很可能是onSelect），您可以使用datepicker函数配置日期选择器，并启用该按钮。

Answer 2

试试这个..

$(document).ready(fuction(){
$("#conference_end_date").attr("disabled", "disable");// add end date to disable

});

$( "#conference_start_date" ).datepicker({
    showOn: "button",
    buttonImage: "/roswellpark/images/calendar_icon.png",
    buttonImageOnly: true,
    buttonText: '',
    yearRange: "-100y",
    changeYear: true,
    changeMonth:true,
    minDate: tomorrow,
    onSelect: function (date) {

$("#conference_end_date").removeAttr("disabled");// remove disable after select startdate

        var selectedDate = new Date(date);
        var msecs = 86400000*3; // one day have 86400000 micro seconds
        var defaultSelectedDate = new Date(selectedDate.getTime() + msecs);
        var endDate =  new Date(selectedDate.getTime()+86400000);
        $("#conference_end_date").datepicker('option', 'minDate', endDate);
        $('#conference_end_date').datepicker("setDate", defaultSelectedDate);
    }
});

如何在用户输入开始日期之前禁用结束日期选择器？

2 个答案: