我有一个日期字段,可以选择“开始日期”和“结束日期”,我想做的是禁用以前的日期,并从今天的日期开始在“开始日期”字段和“结束日期”字段中显示,我想展示+3天,而不是更多。我已经编写了代码,但是只有当我选择今天的日期时才有效,如果我选择的日期是9月25日,那么它将禁用“结束日期”中的所有日期。这是我的代码:
<div class="row-form clearfix">
<div class="span5">Free Trail Date:</div>
<div class="span7">
<input value="" placeholder="From" style="width: 96px;" type="text" name="ftdt" id="dob" required/>
<input value="" placeholder="To" style="width: 96px;" type="text" name="ft_snd" id="dob2" required/>
</div>
</div>
JavaScript代码:
<script>
$(function() {
$('#dob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '2012:2020',
minDate: new Date(),
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
$("#dob2").datepicker( "option", "minDate", endDate );
$("#dob2").datepicker( "option", "maxDate", '+2d' );
}
});
});
$(function() {
$('#dob2').datepicker({changeMonth: true, changeYear: true,
yearRange: '2012:2020'});
});
</script>
如果我选错了日期,请帮助我,如果我选择了今天的日期,我的代码将起作用,但是当我选择高级日期时,它将禁用“结束日期”字段。
答案 0 :(得分:0)
我通过添加一些更改解决了我的问题:
<script>
$(function() {
$('#dob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '2012:2020',
minDate: new Date(),
maxDate: '+2y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
var lastDate = new Date(selectedDate.getTime() + 2 * msecsInADay);
$("#dob2").datepicker( "option", "minDate", endDate );
$("#dob2").datepicker( "option", "maxDate", lastDate );
}
});
});
</script>
答案 1 :(得分:0)
$(function() {
$('#dob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '2012:2020',
minDate: new Date(),
onSelect: function(date){
var selectedDate = new Date(date);
$("#dob2").datepicker( "option", "minDate", new Date(selectedDate.getTime() + 86400000) );
$("#dob2").datepicker( "option", "maxDate", new Date(selectedDate.getTime() + (3*24*60*60*1000)) ); //where 3 is for 3 days.you can change it according to your need
}
});
$('#dob2').datepicker({changeMonth: true, changeYear: true, yearRange: '2012:2020'});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<div class="row-form clearfix">
<div class="span5">Free Trail Date:</div>
<div class="span7">
<input value="" placeholder="From" style="width: 96px;" type="text" name="ftdt" id="dob" required/>
<input value="" placeholder="To" style="width: 96px;" type="text" name="ft_snd" id="dob2" required/>
</div>
</div>