使用 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 处理程序。

如何检测通过日期选择器而不是在输入元素中输入对所选日期所做的更改？

Answer 1

所有其他答案都与jQuery UI datepicker有关，但问题与bootstrap-datepicker有关。

您可以使用changeDate 事件在相关输入上触发更改事件，然后从onChange 处理程序处理更改日期的两种方式：

更改日期

日期更改时触发。

例子：

$('#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

试试这个：

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

Answer 3

这是我的代码：

$('#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 4

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

Answer 5

$(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,}) ;

});

Answer 6

试试下面的代码示例。它对我有用

var date_input_field = $('input[name="date"]');
    date_input_field .datepicker({
        dateFormat: '/dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    }).on('change', function(selected){
        alert("startDate..."+selected.timeStamp);
    });

Answer 7

基于 Irvin Dominin 示例，我创建了 2 个支持粘贴并按 Enter 的示例。

这适用于 Chrome： http://jsfiddle.net/lhernand/0a8woLev/

$(document).ready(function() {
   $('#date-daily').datepicker({
      format: 'dd/mm/yyyy',
      assumeNearbyYear: true,
      autoclose: true,
      orientation: 'bottom right',
      todayHighlight: true,
      keyboardNavigation: false
    })
    /* On 'paste' -> loses focus, hide calendar and trigger 'change' */
    .on('paste', function(e) {
      $(this).blur();
      $('#date-daily').datepicker('hide');
    })
    /* On 'enter' keypress -> loses focus and trigger 'change' */
    .on('keydown', function(e) {

      if (e.which === 13) {
         console.log('enter');
         $(this).blur();
      }
    })
    .change(function(e) {
      console.log('change');
      $('#stdout').append($('#date-daily').val() + ' change\n');
    });
});

但不是在 IE 中，所以我为 IE11 创建了另一个示例： https://jsbin.com/timarum/14/edit?html,js,console,output

$(document).ready(function() {
   $('#date-daily').datepicker({
      format: 'dd/mm/yyyy',
      assumeNearbyYear: true,
      autoclose: true,
      orientation: 'bottom right',
      todayHighlight: true,
      keyboardNavigation: false
    })
    // OnEnter -> lose focus
    .on('keydown', function(e) {
         if (e.which === 13){ 
           $(this).blur();
         }
    })
    // onPaste -> hide and lose focus
    .on('keyup', function(e) {
         if (e.which === 86){ 
            $(this).blur();
            $(this).datepicker('hide');
          }
    })
    .change(function(e) {
       $('#stdout').append($('#date-daily').val() + ' change\n');
    });
});

如果最后一个示例在 IE11 中仍然无法运行，您可以尝试拆分设置：

// DatePicker setup
$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    assumeNearbyYear: true,      /* manually-entered dates with two-digit years, such as '5/1/15', will be parsed as '2015', not '15' */
    autoclose: true,             /* close the datepicker immediately when a date is selected */
    orientation: 'bottom rigth',
    todayHighlight: true,        /* today appears with a blue box */
    keyboardNavigation: false    /* select date only onClick. when true, is too difficult free typing  */
}); 

还有事件处理程序：（注意我没有使用$('.datepicker').datepicker({）

   // Smoker DataPicker behaviour
    $('#inputStoppedDate')
    // OnEnter -> lose focus
    .on('keydown', function (e) {
        if (e.which === 13){ 
            $(this).blur();
        }
    })
    // onPaste -> hide and lose focus
    .on('keyup', function (e) {
        if (e.which === 86){ 
            $(this).blur();
            $(this).datepicker('hide');
        }
    })
    .change(function (e) {
        // do saomething
    });

Answer 8

你可以使用onSelect事件

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

选择日期选择器时调用。该函数接收 选择日期作为文本，日期选择器实例作为参数。这 指关联的输入字段。

SEE HERE