【发布时间】：2019-05-29 02:59:55
【问题描述】：
我有一个简单的表单，其中包含一个提交按钮和 2 个输入文本，分别调用“date1”和“date2”，两者都使用 DatePicker Gijgo插件 (https://gijgo.com/datepicker) 选择日期。
如果我从“date2”中选择小于今天的日期，我想禁用提交按钮，如果我从“data2”中选择日期，我想启用提交按钮大于/等于今天。
在我在这里发帖之前，我研究了以下主题，但我没有找到解决这个问题的正确方法：
- JQuery Datepicker OnSelect and TextChanged problem
- Activate button when two datepickers fields have values
- jQuery disable or enable submit button based on dates
下面是我正在工作的代码：
1. CDN 脚本
<!-- BOOTSTRAP CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<!-- BOOTSTRAP SCRIPT CDN -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- DATEPICKER SCRIPT CDN -->
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
2。 HTML 表单代码
<div class="container" style="max-width:507px;">
<br>
<form method="post" id="date_form" enctype="multipart/form-data">
<div class="form-row">
<div class="col-md-6 mb-3">
<label align="left"><b>Date 1</b></label>
<input type="text" name="date1" id="date1" class="form-control"/>
</div>
<div class="col-md-6 mb-3">
<label align="left"><b>Date 2</b></label>
<input type="text" name="date2" id="date2" class="form-control"/>
</div>
</div>
</form>
<div class="form-footer">
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-success" value="SUBMIT" disabled/>
</div>
</div>
- 在“date1”选择的日期之前禁用“date2”中的旧日期的 DatePicker 脚本：
<!-- DATEPICKER SCRIPT -->
<script>
var today = new Date();
$('#date1').datepicker({
format: 'dd/mm/yyyy',
uiLibrary: 'bootstrap4',
iconsLibrary: 'fontawesome',
maxDate: function () {
return $('#date2').val();
}
});
$('#date2').datepicker({
format: 'dd/mm/yyyy',
uiLibrary: 'bootstrap4',
iconsLibrary: 'fontawesome',
minDate: function () {
return $('#date1').val();
}
});
</script>
4.最后，当我从“date2”中选择一个小于（
<!-- SCRIPT TO DISABLE SUBMIT BUTTON IF ***date2*** IS LESS THAN TODAY -->
<script>
$('#date2').datepicker({
dateFormat: 'dd/mm/yyyy',
onSelect: function(dateText){
var date2 = $('#date2').val();
var curDate = new Date();
if(date2 < curDate){
$("#btnSubmit").attr("disabled", true);
}else{
$("#btnSubmit").attr("disabled", false);
}
}
});
</script>
在这种情况下，当我每次从“date2”中选择小于今天的日期时，如何修改上面的脚本以禁用提交按钮，并在我选择日期时启用提交按钮来自大于/等于今天的“date2”？
【问题讨论】：
标签： jquery html datepicker