首页 文章

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

提问于
浏览 次
57

我有一个输入元素，其中包含使用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>

当用户通过直接输入input元素来更改日期时，我可以使用input元素的onChange事件获取值，如上所示 . 但是当用户从datepicker更改日期时（即通过单击日历上的日期），不会调用onChange处理程序 .

如何检测通过日期选择器创建的所选日期的更改，而不是通过键入输入元素？

jquery twitter-bootstrap datepicker bootstrap-datepicker

6 回答

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

});
    回复于
  • 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>
    回复于
  • 1

    试试这个：

    $("#dp3").on("dp.change", function(e) {
    alert('hey');
});
    回复于
  • 8

    您可以使用 onSelect 事件

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

    选择日期选择器时调用它 . 该函数接收选定的日期作为文本，并将datepicker实例作为参数 . 这指的是相关的输入字段 .

    SEE HERE

    回复于
  • -15

    所有其他答案都与 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/

    回复于
  • 103

    这是我的代码：

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

    回复于

相关问题