使用 bootstrap DateTimePicker 上的下拉菜单更新 minDate

Question

我的项目中有一个日期时间选择器，每当我 select 在下拉菜单中选择不同的选项时，都需要更新最短日期。目前我有：

<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') 因为您使用的是 moment 对象。

$('#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>

使用 bootstrap DateTimePicker 上的下拉菜单更新 minDate

Updating minDate with dropdown on a bootstrap DateTimePicker

javascript

jquery

datetimepicker

twitter-bootstrap

eonasdan-datetimepicker