使用引导 DateTimePicker 上的下拉列表更新 minDate

Question

我的项目中有一个日期时间选择器，每当我在下拉列表中选择其他选项时，都需要更新最小日期。目前我有：

<div id="howManydays"></div>
<select id="ago">
<option value="7">week</option>
<option value="31">month</option>
<option value="365">year</option>
</select>

对于我的下拉菜单和我的日期时间选择器是：

<div class='input-group date' id='startDateTimeDiv'>       
<input id="startDateTimeSelection" type='text' class="form-control" name="startDateTimeSelection" style="width: 250px;" /> 
<span class="input-group-addon"> 
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div> 
<!-- bootstrap date time pickers --> 
<script type="text/javascript">
$(function() {
$('#startDateTimeDiv').datetimepicker({
format : 'YYYY-MM-DD HH:mm:ss',
minDate : moment().subtract(document.getElementById("ago").value, 'd').format( 'YYYY-MM-DD'),
maxDate : moment().add(1, 'd').format('YYYY-MM-DD'),
widgetPositioning : 
{
horizontal : 'right',
vertical : 'bottom'
}
});
});
</script>

当我更改下拉列表的值时，选择器仍锁定到过去 7 天。任何帮助表示赞赏。

Answer 1

如果你使用的是 boostrap 3，你可以使用 .options((：

$('#ago').selectpicker().on('change', function(e) {
var x = this.value;
$('#startDateTimeDiv').data("DateTimePicker").options({
minDate : moment().subtract(x, 'd'),
maxDate : moment().add(1, 'd')
});
});

注意：您不需要使用.format('YYYY-MM-DD'(，因为您使用的是时刻对象。

$('#ago').selectpicker().on('change', function(e) {
var x = this.value;
$('#startDateTimeDiv').data("DateTimePicker").options({
minDate : moment().subtract(x, 'd'),
maxDate : moment().add(1, 'd')
});
});
$('#startDateTimeDiv').datetimepicker({
format : 'YYYY-MM-DD HH:mm:ss',
minDate : moment().subtract(document.getElementById("ago").value, 'd'),
maxDate : moment().add(1, 'd'),
widgetPositioning :
{
horizontal : 'right',
vertical : 'bottom'
}
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<select id="ago">
<option value="7">week</option>
<option value="31">month</option>
<option value="365">year</option>
</select>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='startDateTimeDiv'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>