Javascript Jquery datepicker更改事件触发器和输入的默认更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27506111/
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
Jquery datepicker change event trigger and input's default change event
提问by Konstantin Vahrushev
I have datepicker
我有日期选择器
<input type='text' class='inp'>
<script>
$('.inp').datepicker();
$(".inp").on("change",function (){
console.log('inp changed');
});
</script>
When I first change '.inp' manually type there a value, then immediately I click on datepicker's opened calendar. I get two 'change' event listeners. First from manual change, then from datepicker change. How can I avoid this?
当我第一次更改 '.inp' 时手动输入一个值，然后我立即单击 datepicker 打开的日历。我有两个“更改”事件侦听器。首先是手动更改，然后是日期选择器更改。我怎样才能避免这种情况？
回答by Parkash Kumar
Set your input readOnly, it will help you to change the value of field through icon only.
设置您的输入readOnly，它将帮助您仅通过图标更改字段的值。
<input type='text' class='inp' readOnly />
then use onSelectto get selected date, as following:
然后使用onSelect获取选择的日期，如下：
$(function() {
$(".inp").datepicker({
onSelect: function(dateText, inst) {
// alert(dateText);
}
});
});
回答by brso05
Try using the onSelect function like:
尝试使用 onSelect 函数，例如：
$(function() {
$( ".datepicker" ).datepicker({
onSelect: function() {
//your code here
}});
This will be fired when they select a date from the calendar not when they are typing.
这将在他们从日历中选择日期而不是在他们输入时触发。
回答by Shawn Balestracci
You can have onSelect trigger the change event on the text field. This way editing the date via the text box or via the date picker behave the same.
您可以让 onSelect 触发文本字段上的更改事件。这种方式通过文本框或通过日期选择器编辑日期的行为相同。
$('.inp').datepicker({
onSelect: function() {
return $(this).trigger('change');
}
);
$(".inp").on("change",function (){
console.log('inp changed');
}
回答by athene
Thank you everyone, this is what I used though,
谢谢大家，我用的就是这个
function myfunction(x,x2){
var date1 = new Date(x);
var MyDateString;
MyDateString = date1.getFullYear()+ '/' + ('0' + (date1.getMonth()+1)).slice(-2) + '/' + ('0' + date1.getDate()).slice(-2);
x2.value= MyDateString;
}
x, being the datepicker value and x2 being the datepicker object
x，是日期选择器值，x2 是日期选择器对象
回答by Rahul Koshti
Try this
尝试这个
$(function() {
$("#birth_date").datepicker({
onSelect: function() {
console.log("You Code Here");
}});
});
回答by krunal shimpi
If you are using datepiker ui you can also used following formate
如果您使用的是 datepiker ui，您还可以使用以下格式
<input type='text' class='inp'>
<script>
$('.inp').datepicker({
onSelect: function(date) {
$(this).change();
},
}).on("change",function (){
console.log('inp changed');
});
</script>
回答by Mivaweb
If you are using the bootstrap datepicker you can do the following:
如果您使用引导程序日期选择器，您可以执行以下操作：
$('.datepicker').datepicker()
.on('changeDate', function(e){
# `e` here contains the extra attributes
});
For more details view: Bootstrap Datepicker events
有关更多详细信息，请查看：Bootstrap Datepicker 事件
回答by Konstantin Vahrushev
Thanks! Everybody, but I could not make field readonly one, this is requirement. So I had to reasearch myself. So I posting my final solution. I did unbinding for 150 ms, then bind again. I made a jquery plugin for this
谢谢！每个人，但我不能使字段只读一个，这是要求。所以我不得不重新审视自己。所以我发布了我的最终解决方案。我解绑了 150 毫秒，然后再次绑定。 我为此制作了一个 jquery 插件
function myfunc(that){
$(that).one('change', function(){
var that = this;
setTimeout(function(){myfunc(that);}, 150);
//some logic
}
)
}
myfunc(".inp");
回答by Jaspreet Kaur
if you are using date picker of jquery there is no need of calender event fire. you can fire the event on textbox "textchanged"
如果您使用的是 jquery 的日期选择器，则不需要日历事件触发。您可以在文本框“textchanged”上触发事件
