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

Posted 2023-05-07

【中文标题】jQuery datepicker 更改事件触发和输入的默认更改事件

【英文标题】：Jquery datepicker change event trigger and input's default change event

【发布时间】：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>。

【参考方案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”上触发事件

【讨论】：

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