Обнаружить изменение на выбранную дату с помощью bootstrap-datepicker

Question

У меня есть элемент ввода с прикрепленным фидером, созданным с использованием bootstrap-datepicker.

<div class="well"> 
    <div class="input-append date" id="dp3" data-date="2012-01-02" data-date-format="yyyy-mm-dd"> 
     <input type="text" id="date-daily"> 
     <span class="add-on"><i class="icon-th"></i></span>  
    </div> 
</div> 

<script language="JavaScript" type="text/javascript"> 
    $(document).ready(function() { 
     $('#dp3').datepicker(); 
     $('#date-daily').val('0000-00-00'); 
     $('#date-daily').change(function() { 
      console.log($('#date-daily').val()); 
     }); 
    }); 
</script> 

Когда пользователь изменяет дату, введя непосредственно в элемент ввода, можно получить значение с помощью события OnChange элемента ввода, как показано выше. Но когда пользователь меняет дату с datepicker (т. Е. Нажав на дату в календаре), обработчик onChange не вызывается.

Как я могу обнаружить изменения на выбранную дату, которые сделаны с помощью datepicker, а не путем ввода ввода в элемент ввода?

Answer 1

Все остальные ответы, связанные с jQuery UI datepicker, но вопрос о bootstrap-datepicker.

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

ChangeDate

Уволен когда дата изменяется.

Пример:

$('#dp3').datepicker().on('changeDate', function (ev) { 
    $('#date-daily').change(); 
}); 
$('#date-daily').val('0000-00-00'); 
$('#date-daily').change(function() { 
    console.log($('#date-daily').val()); 
}); 

Вот рабочая скрипку: http://jsfiddle.net/IrvinDominin/frjhgpn8/

Answer 2

Вы можете использовать onSelect событие

$("#date-daily").datepicker({ 
    onSelect: function(dateText) { 
    alert($('#dp3').val()); 
    } 
}); 

Вызывается при выборе DatePicker. Функция принимает выбранную дату как текст и экземпляр datepicker в качестве параметров. это относится к соответствующему полю ввода.

SEE HERE

Answer 3

Попробуйте это:

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

Answer 4

Вот мой код, который:

$('#date-daily').datepicker().on('changeDate', function(e) { 
    //$('#other-input').val(e.format(0,"dd/mm/yyyy")); 
    //alert(e.date); 
    //alert(e.format(0,"dd/mm/yyyy")); 
    //console.log(e.date); 
}); 

Просто раскомментируйте тот, который вы предпочитаете. Первый вариант изменяет значение другого входного элемента. Второй предупреждает дату с датой datepicker по умолчанию. Третий предупреждает дату с вашим собственным пользовательским форматом. Последняя опция выводит в журнал (дата даты по умолчанию).

Это ваш выбор для использования e.date, e.dates (для ввода нескольких данных) или e.format (...).

здесь some more info

Answer 5

$(function() { 
 
    $('input[name="datetimepicker"]').datetimepicker({ 
 
    defaultDate: new Date() 
 
    }).on('dp.change',function(event){ 
 
    $('#newDateSpan').html("New Date: " + event.date.format('lll')); 
 
    $('#oldDateSpan').html("Old Date: " + event.oldDate.format('lll')); 
 
    }); 
 
    
 
});

<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://momentjs.com/downloads/moment.min.js"></script> 
 
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
 
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> 
 

 
<div class="container"> 
 
    <div class="col-xs-12"> 
 
    <input name="datetimepicker" /> 
 
    <p><span id="newDateSpan"></span><br><span id="oldDateSpan"></span></p> 
 
    </div> 
 
</div>