Диапазон начальной загрузки для начальной загрузки при выпуске init - PullRequest
Новая
       68

Диапазон начальной загрузки для начальной загрузки при выпуске init

0 голосов
/ 06 февраля 2019

Иногда у меня есть формы с предварительно скомпилированными датами (в этом примере: 02/02/2019). 

<div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control" value="06/02/2019"/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>
<div class='input-group date' id='datetimepicker2'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

У меня возникает проблема с начальной загрузкой datetimepicker: когда значение уже существует при загрузке страницы, "функция блокировки не работает: 

$('#datetimepicker1').datetimepicker({
    format: 'DD/MM/YYYY'
});

$('#datetimepicker2').datetimepicker({
    format: 'DD/MM/YYYY',
    useCurrent: false //Important! See issue #1075
});

$("#datetimepicker1").on("dp.change", function (e) {
    $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});      

$("#datetimepicker2").on("dp.change", function (e) {
    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date); //<-- it works only when I change date.
});

После первой загрузки страницы, когда я попытаюсь выбрать дату на datetimepicker2, я бы хотел заблокировать уже даты до 06/02 /2019, но все даты доступны!Это работает, только если я делаю изменения в полях ввода.

См. Мою скрипку: https://jsfiddle.net/omerts/8jpmkcr5/1/

1 Ответ

0 голосов
/ 07 февраля 2019

Согласно Bootstrap Datetime Picker , вам необходимо использовать minDate и maxDate при инициализации Datetime Picker. 

$(function () {    
         var datetime1 = $('#datetime1').val() != "" ? new Date($('#datetime1').val()) : false;
         var datetime2 = $('#datetime2').val() != "" ? new Date($('#datetime2').val()) : false;
                $('#datetimepicker1').datetimepicker({
                maxDate: datetime2
                });
                
                $('#datetimepicker2').datetimepicker({
                  useCurrent: false, //Important! See issue #1075
                  minDate: datetime1
                });
                
                $("#datetimepicker1").on("dp.change", function (e) {
                  $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
                });      
                
                $("#datetimepicker2").on("dp.change", function (e) {
                    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
                });
            });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" id="datetime1" value="02/05/2019" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" id="datetime2"  />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
...