我的项目中有一个日期时间选择器,每当我在下拉列表中选择不同的选项时,需要更新最小日期。目前我有:
<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天。任何帮助赞赏。
如果你使用bootstrap 3你可以使用qazxsw poi:
.options()
注意:您不需要使用.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')
});
});
$('#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'
}
});