twitter-bootstrap 从日期时间选择器引导程序上单击的日期获取单击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37031668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get click event from date clicked on datetimepicker bootstrap
提问by Melissa
I'm using datepicker for bootstrap from this site https://eonasdan.github.io/bootstrap-datetimepicker/
我正在使用 datepicker 从这个站点https://eonasdan.github.io/bootstrap-datetimepicker/
I'm trying to capture click from date clicked at the beginning when input is empty. the problem with dp.change is that the first click event is captured when I click on calendar icon. If I put the click on td.day it dosen't work.
当输入为空时，我试图从开始时单击的日期捕获单击。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>回答by Jjsg08
I'm coming late, I am haven't the solution, but I know why your code does not work.
我来晚了，我没有解决方案，但我知道为什么你的代码不起作用。
The structure of the calendar is generated and deleted in each showing, due to this the listeners attached on the beginning to be deleted and lost effect, you should attach the listeners in the moment of calendar is generated again.
日历的结构是在每次放映时生成和删除的，因此在开始时附加的侦听器被删除并失去效果，您应该在日历重新生成的那一刻附加侦听器。
Maybe the solution that you want is some how this: Warning the code isn't tested.
也许您想要的解决方案是这样的：警告代码未经过测试。
$(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>回答by Dineshkumar P
I have use this method to get click event
我已经使用这种方法来获取点击事件
$("#datetimepicker").on("dp.show", function (e) {
$('div tbody').on('click', 'tr > .day', function () {
alert('day clicked');
})
});
回答by vaso123
This is not surley an answer, but I am add it because of code formatting. When you load the page, the calendar is not there, if you inspect the div.
这不是 surley 答案，但由于代码格式，我添加了它。当您加载页面时，日历不在那里，如果您检查div.
It is a liveelement, so use jQueryonfunction:
它是一个live元素，所以使用jQueryon函数：
$(".datepicker .datepicker-days").on('click', 'td.day', function () {
alert('day clicked');
});
回答by vipin Bhandari
$('#datetimepicker').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true,
onClose: function () {
var selectedDate= new Date($('#datetimepicker').val())
alert(selectDate.getDate())
}
});
use onClose event to get Date
使用 onClose 事件获取日期
