jQuery datepicker 更改事件触发和输入的默认更改事件答案

【问题标题】：Jquery datepicker change event trigger and input's default change eventjQuery datepicker 更改事件触发和输入的默认更改事件
【发布时间】：2015-02-14 20:26:14
【问题描述】：

我有日期选择器

  <input type='text' class='inp'>  
<script>
   $('.inp').datepicker();

  $(".inp").on("change",function (){ 
   console.log('inp changed');
  });
</script>

当我第一次更改“.inp”时，手动输入一个值，然后立即单击 datepicker 打开的日历。我得到了两个“改变”事件监听器。首先是手动更改，然后是 datepicker 更改。我怎样才能避免这种情况？

【问题讨论】：

无关：你的结束标签错了，应该是</script>。

标签： javascript jquery datepicker jquery-ui-datepicker

【解决方案1】：

设置您的输入readOnly，它将帮助您仅通过图标更改字段的值。

<input type='text' class='inp' readOnly />

然后使用onSelect获取选定日期，如下：

$(function() {
    $(".inp").datepicker({
        onSelect: function(dateText, inst) {
            // alert(dateText);
        }
    });
});

【讨论】：

设置属性readOnly 可能会禁用此字段的验证（如果有）。在我看来，最好的解决方案是设置 attr onkeydown="false"

【解决方案2】：

尝试使用 onSelect 函数，例如：

$(function() {
    $( ".datepicker" ).datepicker({
        onSelect: function() {
        //your code here
    }});

这将在他们从日历中选择一个日期而不是在他们输入时触发。

【讨论】：

【解决方案3】：

您可以让 onSelect 在文本字段上触发更改事件。这样通过文本框或日期选择器编辑日期的行为相同。

$('.inp').datepicker({
  onSelect: function() {
    return $(this).trigger('change');
  }
});
    
$(".inp").on("change",function (){ 
   console.log('inp changed');
});

【讨论】：

【解决方案4】：

如果您使用的是引导日期选择器，您可以执行以下操作：

$('.datepicker').datepicker()
    .on('changeDate', function(e){
        # `e` here contains the extra attributes
});

更多详情查看：Bootstrap Datepicker events

【讨论】：

【解决方案5】：

谢谢！大家，但我不能使字段只读一个，这是要求。所以我不得不重新研究自己。所以我发布了我的最终解决方案。我解绑了 150 毫秒，然后再次绑定。 I made a jquery plugin for this

function myfunc(that){
        $(that).one('change', function(){
                var that = this;
                setTimeout(function(){myfunc(that);}, 150);
                //some logic
            }
        )
}

myfunc(".inp");

【讨论】：

【解决方案6】：

谢谢大家，不过这是我用的，

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，为日期选择器值，x2 为日期选择器对象

【讨论】：

【解决方案7】：

试试这个

  $(function() {
        $("#birth_date").datepicker({
        onSelect: function() {
            console.log("You Code Here");
        }});
    });

【讨论】：

【解决方案8】：

如果你使用 datepiker ui 你也可以使用以下格式

<input type='text' class='inp'>  
 <script>
$('.inp').datepicker({

onSelect: function(date) {

      $(this).change();
    },
}).on("change",function (){ 
   console.log('inp changed');
  });
</script>

【讨论】：

感谢您的贡献，@krunal，但这将有助于添加一些关于为什么会起作用的上下文。

【解决方案9】：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css"/>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
    var j = jQuery.noConflict();
    j(function() {
        j("#datepickerFrom").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy/mm/dd",
            onSelect: function () {
                var date = $(this.value).selector;
                document.getElementById("dateFrom").value = date;
            },
        }).on("change",function (){
            var date = $(this.value).selector;
            document.getElementById("dateFrom").value = date;
        })
        .datepicker("setDate",document.getElementById("dateFrom").value);
});
</script>

<input id="datepickerFrom"/>
<input type="hidden" name="dateFrom" id="dateFrom"/>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案10】：

如果您使用 jquery 的日期选择器，则不需要日历事件触发。您可以在文本框“textchanged”上触发事件

【讨论】：

如果您在日历中使用文本框，那么您可以使用上述方法。