从点击日期时间选择器引导程序的日期获取点击事件

Question

我正在使用 datepicker 从该站点 https://eonasdan.github.io/bootstrap-datetimepicker/ 进行引导

当输入为空时，我正在尝试从开始时单击的日期捕获单击。 dp.change 的问题是当我点击日历图标时，第一次点击事件被捕获。 如果我点击 td.day 它就不起作用。

$(document).ready(function(){		
  $(function () {
    $('#datetimepicker').datetimepicker({
      format:'YYYY-MM-DD',
       locale: 'en'
    });
  });	
  $(".datepicker .datepicker-days td.day").click(function(){
    alert('day clicked');	
  });
  $("#datetimepicker").on("dp.change", function() {
    alert('calendar icon clicked');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="input-group date reload_element" id="datetimepicker">
  <span class="input-group-addon reload_element cursor-pointer">
    <i class="fa fa-calendar"></i>
  </span>
  <input type="text" id="start_date" class="form-control reload_element" style="width:100px;" autocomplete="off"/>
</div>

Answer 1

我来晚了，我没有解决办法，但我知道你的代码为什么不起作用。

日历的结构在每次播放时都会生成和删除，因此开头附加的监听器会被删除并失去效果，您应该在日历再次生成的那一刻附加监听器。

也许您想要的解决方案是这样的：警告代码未经测试。

$(document).ready(function(){		
    $(function () {
        $('#datetimepicker').datetimepicker({
            format:'YYYY-MM-DD',
            locale: 'en'
        });
        var cont = 0;
        $('.reload_element').on("dp.show",function(e){
            $('td.day').on("click",function(e){
                $('#response').text('day clicked '+cont); 
            });
            ++cont;
            return true;
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="input-group date reload_element" id="datetimepicker">
  <span class="input-group-addon reload_element cursor-pointer">
    <i class="fa fa-calendar"></i>
  </span>
  <input type="text" id="start_date" class="form-control reload_element" style="width:100px;" autocomplete="off"/>
</div><span id="response"></span>

Answer 2

我已经用这个方法来获取点击事件

$("#datetimepicker").on("dp.show", function (e) {
$('div tbody').on('click', 'tr > .day', function () {
        alert('day clicked');
})
});

Answer 3

$('.scheduleDate').datepicker({
    format: 'dd/M/yyyy',
}).on('changeDate', function(e) {   
    console.log(e.format());
});

Answer 4

这不是一个简单的答案，但我添加它是因为代码格式。当您加载页面时，如果您检查 div，则日历不存在。

这是一个live元素，所以使用jQueryon函数：

$(".datepicker .datepicker-days").on('click', 'td.day', function () {
    alert('day clicked');
});

Answer 5

 $('#datetimepicker').datepicker({
       dateFormat: 'yy-mm-dd',
       showButtonPanel: true,

        onClose: function () {
            var selectedDate= new Date($('#datetimepicker').val())
alert(selectDate.getDate())
       }
 });

使用 onClose 事件获取日期