使用bootstrap-datepicker检测对选定日期的更改

我有一个输入元素，带有使用bootstrap-datepicker创建的附加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事件获取值，如上所示。但是，当用户从日期选择器更改日期时（即通过单击日历中的日期），则不会调用onChange处理程序。

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

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

您可以使用onchangeDate事件来触发相关输入上的change事件，然后处理从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/

尝试这个：

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

这是我的代码：

$('#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（...）。

这里有更多信息

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

});

基于Irvin Dominin示例，我创建了2个支持Paste的示例，然后按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
    });

尝试下面的代码示例。它为我工作

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);
    });

您可以使用onSelect事件

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

选择日期选择器时调用。该函数以文本形式接收所选日期，以参数形式接收datepicker实例。这是指关联的输入字段。

看这里