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

问题描述 投票:0回答:1

我的项目中有一个日期时间选择器,每当我在下拉列表中选择不同的选项时,需要更新最小日期。目前我有:

<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天。任何帮助赞赏。

javascript jquery twitter-bootstrap datetimepicker eonasdan-datetimepicker
1个回答
1
投票

如果你使用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'
    }
});
© www.soinside.com 2019 - 2024. All rights reserved.