Question

我的问题来自this post

我想禁用提交按钮，直到两个输入都填入了一个datepicker。我可以毫不费力地使用标准文本输入，但它不能使用我的日期选择器。我强烈怀疑它是关于datepickers id的。

首先是我想做的一个例子（没有datepickers）。然后我尝试用datepickers。

使用文本输入（工作）：

身体：

<form method=post>
<input type="text" id='first_name'>
<input type="text" id='second_name'>
<input type="submit" value="Submit" id="submit" disabled>

JQuery：

<script>
$(':text').keyup(function() {
if($('#first_name').val() != "" && $('#second_name').val() != "") {
   $('#submit').removeAttr('disabled');
} else {
   $('#submit').attr('disabled', true);   
}
});</script>

使用datepickers（不工作）：

负责人：

<script>
$(function() {
    $( "#datepicker1" ).datepicker({ dateFormat: 'dd/mm/yy' ,  minDate: new Date(2016, 04 - 1, 21), maxDate : new Date(2016, 05 - 1, 04)});
    $( "#datepicker2" ).datepicker({ dateFormat: 'dd/mm/yy' ,  minDate: new Date(2017, 04 - 1, 21), maxDate : new Date(2017, 05 - 1, 04)});
</script>

身体：

<form method=post>
<input type="text" id='datepicker1'>
<input type="text" id='datepicker2'>
<input type="submit" value="Submit" id="submit" disabled>

JQuery：

<script>
$(':text').keyup(function() {
if($('#datepicker1').val() != "" && $('#datepicker2').val() != "") {
   $('#submit').removeAttr('disabled');
} else {
   $('#submit').attr('disabled', true);   
}
});</script>

Answer 1

修改

正如oldPadawan所说，当你将datePicker初始化为chekc值时使用onSelect：

(function(){ $( "#datepicker1" ).datepicker({ dateFormat:'dd/mm/yy',minDate: new Date(2016,04 - 1, 21), maxDate : new Date(2016, 05 - 1, 04),onSelect: function(date) { checkDatePicker(); }}); $( "#datepicker2" ).datepicker({ dateFormat: 'dd/mm/yy' , minDate: new Date(2017, 04 - 1, 21), maxDate : new Date(2017, 05 - 1, 04),onSelect: function(date) { checkDatePicker(); }}); })(); function checkDatePicker(){ if($('#datepicker1').val() != "" && $('#datepicker2').val() != "") { $('#submit').removeAttr('disabled'); } else { $('#submit').attr('disabled', true); } }

Answer 2

我猜问题与keyup有关。通常情况下，当您从datepicker keyup中选择日期时，不会调用该日期。

在datepicker文本字段中手动插入日期时，它将起作用。尝试将change与keyup事件一起使用

<script>
$(':text').on('change keyup', function() {
if($('#datepicker1').val() != "" && $('#datepicker2').val() != "") {
   $('#submit').removeAttr('disabled');
} else {
   $('#submit').attr('disabled', true);   
}
});
</script>

希望这会有所帮助......

当两个日期选择器字段具有值时激活按钮

2 个答案: