Обновление minDate с выпадающим списком при начальной загрузке DateTimePicker - PullRequest
Новая
       64

Обновление minDate с выпадающим списком при начальной загрузке DateTimePicker

0 голосов
/ 04 сентября 2018

В моем проекте есть средство выбора даты и мне нужно обновлять минимальную дату, когда я выбираю другую опцию в раскрывающемся списке. В настоящее время у меня есть: 

<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 дней. Любая помощь приветствуется.

1 Ответ

0 голосов
/ 04 сентября 2018

Если вы используете 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 ('ГГГГ-ММ-ДД') , потому что вы используете моментный объект. 

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