Как вы не можете bootstrap-datepicker очистить существующее значение от ввода, если не выбрана дата?

У меня есть div с датой рождения пользователя, предварительно заполненной php:

<div id="datepicker" class="input-group date">
    <label for="dob">Date of Birth</label> <input type="text" class="form-control" id="dob" name="dob" value="<?php $date = new DateTime($this->swimmers->dob); echo $date->format('d/m/Y');?>"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

javascript:

<script>     
    $('.container .input-group.date').datepicker({
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
    });
</script>

Bootstrap настроен и работает правильно, однако, когда вход "dob" получает и теряет фокус без выбора даты, он очищает значение, которое было предварительно заполнено.

Это, однако, не происходит, если дата была выбрана с помощью datepicker, а затем вход получает и теряет фокус.

Как можно сохранить заполненное значение в поле, если кто-то щелкнет в нем?

Изменить: при первом выборе даты он очищает предварительно заполненное значение, но не вставляет выбранную дату, пока вы не сделаете выбор даты второй раз.

Обновление: обновлен рабочий код!

Ответ 1

Не могу точно сказать, не более пример, но проблема, вероятно, в том, что строка $this->swimmers->dob, которую вы передаете на вход, не распознается как формат даты с помощью bootstrap-datepicker. Вы можете определить формат даты, который он использует, добавив атрибут data-date-format к вашему вводу.

Например, если вы использовали дату форматирования MySQL или объект PHP DateTime с помощью $date->format('Y-m-d'), вы могли бы использовать:

<div id="datepicker" class="input-group date">
    <input type="text" class="form-control" id="dob" name="dob" value="<?php echo $this->swimmers->dob;?>" data-date-format="yy-mm-dd"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

Ответ 2

Установите значение синтаксического анализа на значение false: forceParse: false

    $(".applyDatepicker").datepicker({
            forceParse: false
    });

Ответ 3

Я не уверен, что он работает в php, но для mvc у меня такая же проблема, что Bootstrap удалит значение, если элемент управления получит и теряет фокус, не делая выбор даты.

Я обнаружил, что Bootstrap стирает значение, поскольку оно не распознает значение, установленное

$('#dtControl').val(nextMonth);

Я работаю с bootstrap v3.1.1, и для меня работал следующий код

$('#dtControl').datepicker('setDate', nextMonth);

чтобы заполнить элемент управления datepicker. Таким образом, Bootstrap распознает дату и не удаляет ее, если элемент управления получает и теряет фокус.

Ответ 4

У меня была аналогичная проблема, когда пользователь дважды нажал на эту же дату. Поле будет "переключаться" между датой и пустым полем. Я вообще не хотел, чтобы он был пуст на любом этапе, так что вот как я об этом узнал, отчасти благодаря Вакасу:

var datepickerContainer = $('#datepicker');

datepickerContainer.datepicker({
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
}).on('show', function() {
    datepickerContainer.datepicker.currentDate = $('input#dob').val(); //update this instance with the current value
}).on('changeDate', function(event) {
    var newDate = $('input#dob').val();
    if (newDate == '' || newDate == null) { //check if the new value is empty - if it is, then just set it back to the last known date for this instance
        datepickerContainer.datepicker('setDate', datepickerContainer.datepicker.currentDate);
    }
});

Это делает его относительно автономным, сохраняя последнее значение даты в этом экземпляре datepicker и не дает очищения от ввода.

Я знаю, что вы решили эту проблему, но я решил, что этот фрагмент может пригодиться кому-то еще в подобной ситуации.

Ответ 5

Когда jQuery вызывает обработчик, ключевое слово this является ссылкой на элемент, в котором выполняется событие. Более того, непустая строка будет оцениваться как true. Исходя из этих фактов, просто выполните проверку в обработчике событий. См. Пример кода ниже.

            .find( 'input[name=startDate]' )
                .datepicker( {format: 'dd-mm-yyyy'} )
                .on( 'changeDate', function() {
                    if( this.value ) { 
                        << do something >>
                    }
                });

ПРИМЕЧАНИЕ. Для эффективности и удобочитаемости в примере кода выше указано свойство DOM значение, вместо того, чтобы обернуть этот в объект jQuery и вызвать val ( ) на нем ($ (this).val()). Это незначительное улучшение, но это хорошая практика как можно более компактная/простая.