从datetimepicker引导程序上点击的日期获取点击事件

get click event from date clicked on datetimepicker bootstrap

本文关键字：日期 获取 事件 datetimepicker 程序上      更新时间：2023-09-26

我正在使用日期选择器从该站点进行引导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>

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

日历的结构是在每次显示中生成和删除的，因此，在开始时附加的侦听器将被删除并失去效果，您应该在生成日历的那一刻再次附加侦听器。

也许你想要的解决方案是这样的：警告代码没有经过测试。

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

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

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

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

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

它是live元素，因此使用jQuery on函数：

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

 $('#datetimepicker').datepicker({
       dateFormat: 'yy-mm-dd',
       showButtonPanel: true,
        onClose: function () {
            var selectedDate= new Date($('#datetimepicker').val())
alert(selectDate.getDate())
       }
 });

使用onClose事件获取日期

相关文章：