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

У меня есть элемент input с прикрепленным элемент управления datepicker, созданные с помощью 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, а не путем ввода в элемент ввода?

6 54
jquery datepicker twitter-bootstrap bootstrap-datepicker

6 ответов:

все остальные ответы относятся к jQuery UI datepicker, но речь идет о bootstrap-datepicker.

вы можете использовать on 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/

100

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

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

$(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>
12

вот мой код:

$('#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 по умолчанию. Третий предупреждает дату с вашим собственным пользовательским форматом. Последний параметр выводит данные в журнал (дата формата по умолчанию).

Это ваш выбор, чтобы использовать электронную.дата , сообщения электронной.даты (для múltiple дата ввода) или по электронной.формат(...).

здесь еще информация

7
$(document).ready(function(){

$("#dateFrom").datepicker({
    todayBtn:  1,
    autoclose: true,
}).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#dateTo').datepicker('setStartDate', minDate);
});

$("#dateTo").datepicker({
    todayBtn:  1,
    autoclose: true,}) ;

});
1

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

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

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

СМОТРИТЕ ЗДЕСЬ

-15