jQuery 使用 bootstrap-datepicker 检测所选日期的更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17009354/
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
Detect change to selected date with bootstrap-datepicker
提问by user2269756
I have an input element with an attached datepicker created using bootstrap-datepicker.
我有一个带有使用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>
When the user changes the date by typing directly into the input element, I can get the value with the input element's onChange event, as shown above. But when the user changes the date from datepicker (i.e. by clicking a date on the calendar), the onChange handler is not called.
当用户通过直接在 input 元素中键入来更改日期时，我可以使用 input 元素的 onChange 事件获取值，如上所示。但是当用户从 datepicker 更改日期（即通过单击日历上的日期）时，不会调用 onChange 处理程序。
How can I detect changes to the selected date that are made via the datepicker, rather than by typing into the input element?
如何检测通过日期选择器而不是通过输入输入元素对所选日期进行的更改？
回答by Irvin Dominin
All others answers are related to jQuery UI datepicker, but the question is about bootstrap-datepicker.
所有其他答案都与 相关jQuery UI datepicker，但问题是关于bootstrap-datepicker.
You can use the on changeDateevent to trigger a change event on the related input, and then handle both ways of changing the date from the onChangehandler:
您可以使用 onchangeDate事件在相关输入上触发更改事件，然后处理从onChange处理程序更改日期的两种方式：
changeDate
Fired when the date is changed.
改变日期
当日期改变时触发。
Example:
例子：
$('#dp3').datepicker().on('changeDate', function (ev) {
$('#date-daily').change();
});
$('#date-daily').val('0000-00-00');
$('#date-daily').change(function () {
console.log($('#date-daily').val());
});
Here is a working fiddle: http://jsfiddle.net/IrvinDominin/frjhgpn8/
这是一个工作小提琴：http: //jsfiddle.net/IrvinDominin/frjhgpn8/
回答by Petr
Try this:
尝试这个：
$("#dp3").on("dp.change", function(e) {
alert('hey');
});
回答by crashtestxxx
$(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>回答by Lucio Chávez
Here is my code for that:
这是我的代码：
$('#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);
});
Just uncomment the one you prefer. The first option changes the value of other input element. The second one alerts the date with datepicker default format. The third one alerts the date with your own custom format. The last option outputs to log (default format date).
只需取消注释您喜欢的那个。第一个选项更改其他输入元素的值。第二个使用 datepicker 默认格式提醒日期。第三个用您自己的自定义格式提醒日期。最后一个选项输出到日志（默认格式日期）。
It's your choice to use the e.date , e.dates (for múltiple date input) or e.format(...).
您可以选择使用 e.date 、 e.dates （用于多个日期输入）或 e.format(...)。
here some more info
这里有更多信息
回答by Sandeep Yadav
$(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,}) ;
});
回答by Luis Hernandez
Based on Irvin Domininexample, I've created 2 examples supporting Paste and hit Enter.
基于Irvin Dominin示例，我创建了 2 个支持粘贴并按 Enter 的示例。
This works in Chrome: http://jsfiddle.net/lhernand/0a8woLev/
这适用于 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');
});
});
But not in IE, so I created another example for IE11: https://jsbin.com/timarum/14/edit?html,js,console,output
但不是在 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');
});
});
If last example still doesn't work in IE11, you can try splitting the setup:
如果最后一个示例在 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 */
});
And the event handlers: (note I'm not using $('.datepicker').datepicker({)
和事件处理程序：（注意我没有使用$('.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
});
回答by PSR
You can use onSelectevent
您可以使用onSelect事件
$("#date-daily").datepicker({
onSelect: function(dateText) {
alert($('#dp3').val());
}
});
It is Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.
选择DatePicker时调用。该函数接收所选日期作为文本和日期选择器实例作为参数。这是指相关的输入字段。
