Событие с датой изменения даты бутстрапа не запускается, когда вручную редактируются даты или дата очистки

<script type="text/javascript">
    // When the document is ready
    $(document).ready(function () {
        $('.datepicker').datepicker({
            format: "yyyy-mm-dd",
        }).on('changeDate', function(ev){
            // do what you want here
            $(this).datepicker('hide');
        }).on('changeDate', function(ev){
            if ($('#startdate').val() != '' && $('#enddate').val() != ''){
                $('#period').text(diffInDays() + ' d.'); 
            } else {
                $('#period').text("-");
            }
        });
    });
</script>

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

ОТВЕТЫ

Ответ 1

Вы должны использовать событие change на самом входе, если вы хотите ответить на ввод вручную, потому что событие changeDate предназначено только для того, когда дата изменяется с помощью datepicker.

Попробуйте что-то вроде этого:

$(document).ready(function() {
    $('.datepicker').datepicker({
        format: "yyyy-mm-dd",
    })
    //Listen for the change even on the input
    .change(dateChanged)
    .on('changeDate', dateChanged);
});

function dateChanged(ev) {
    $(this).datepicker('hide');
    if ($('#startdate').val() != '' && $('#enddate').val() != '') {
        $('#period').text(diffInDays() + ' d.');
    } else {
        $('#period').text("-");
    }
}

Ответ 2

В версии 2.1.5

  • бутстраповские-datetimepicker.js
  • http://www.eyecon.ro/bootstrap-datepicker
  • Вклады:
  • Эндрю Роулс
  • Тьяго де Арруда
  • обновлен для Bootstrap v3 от Jonathan Peterson @Eonasdan

changeDate был переименован в change.dp, поэтому изменение менялось не для меня

$("#datetimepicker").datetimepicker().on('change.dp', function (e) {
            FillDate(new Date());
    });

также необходимо изменить класс css с datepicker на datepicker-input

<div id='datetimepicker' class='datepicker-input input-group controls'>
   <input id='txtStartDate' class='form-control' placeholder='Select datepicker' data-rule-required='true' data-format='MM-DD-YYYY' type='text' />
   <span class='input-group-addon'>
       <span class='icon-calendar' data-time-icon='icon-time' data-date-icon='icon-calendar'></span>
   </span>
</div>

Форматирование даты также работает в таких столицах, как этот формат данных = "ММ-ДД-ГГГГ"

это может быть полезно для кого-то, что мне очень тяжело:)

Ответ 3

Новая версия изменилась.. для последней версии используйте следующий код:

$('#UpToDate').datetimepicker({
        format:'MMMM DD, YYYY',
        maxDate:moment(),
        defaultDate:moment()            
    }).on('dp.change',function(e){
        console.log(e);
    });

Ответ 4

Попробуйте следующее: 

$(".datepicker").on("dp.change", function(e) {
    alert('hey');
});

Ответ 5

Я нашел для нее короткое решение. Дополнительный код не требуется, просто запускайте событие changeDate. Например. $('.datepicker').datepicker().trigger('changeDate');

Ответ 6

Это должно заставить работать в обоих случаях

function onDateChange() {
   // Do something here
}

$('#dpd1').bind('changeDate', onDateChange);
$('#dpd1').bind('input', onDateChange);

Ответ 7

В зависимости от того, какой инструмент выбора даты для Bootstrap вы используете, на данный момент это известная ошибка:

Код: https://github.com/uxsolutions/bootstrap-datepicker

(Документы: https://bootstrap-datepicker.readthedocs.io/en/latest/)

Вот отчет об ошибке:

https://github.com/uxsolutions/bootstrap-datepicker/issues/1957

Если у кого-то есть решение/обходной путь для этого, было бы здорово, если бы вы включили его.

Ответ 8

У меня есть эта версия о datetimepicker https://tempusdominus.github.io/bootstrap-4/ и по любой причине не работает событие изменения с jquery, но с JS vanilla это делает

Я так понимаю

document.getElementById('date').onchange = function(){ ...the jquery code...}

Я надеюсь, что работа для вас