javascript - 仅当第一个字段有值时启用日期选择器

Question

目前，结束日期选项处于禁用状态。我只想在选择开始日期时启用它。

if( $('#datepicker1').val().length === 0) {
    $('#datepicker2').datepicker("disable"); 
} else {
    $('#datepicker2').datepicker("enable");
}

这显然行不通。如果我将 value = 'random date' 插入我的第一个输入字段，它工作正常。我不太确定如何做到这一点。显然不像我希望的那么容易。

我的另一个问题，或者说希望，是禁用包括第一次选择在内的日期和第一次选择之前的日期。你知道，选择开始日期，之前的每个日期和下一个选择器的所述日期都将被禁用。但这是另一个问题。

Answer 1

你可以这样使用:

var end = $('#end').datepicker();

// Defining a function, because we're binding this to two different events
function enableEnd() {
    end.attr('disabled', !this.value.length) // Enable the end input element if the first one has anything in it
       .datepicker('option', 'minDate', this.value); // Set the minimum date to the date in the first input
}

$('#start').datepicker({
    onSelect: enableEnd // Call enableEnd when a date is selected in the first datepicker
}).bind('input', enableEnd); // Do the same when something is inputted by the user

仅在第一个字段已填写后才在第二个字段中启用datepicker 并不是一个好主意，因为用户仍然可以手动将内容添加到第二个字段中，而你失去了格式验证通常由 jQuery UI 日期选择器提供。相反，我们直接禁用第二个 input 元素。

在这里查看它的工作情况:http://www.jsfiddle.net/yijiang/KwhLw/

另请注意，我们在这里使用了 input 事件，因为尽管它的兼容性不太广泛，但比用于键盘事件捕获的常用方法要好。在此处查看对此的完整讨论:http://whattheheadsaid.com/tag/oninput