Jquery日期选择器更改事件触发和输入框默认更改事件

Question

我有日期选择器

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

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

当我手动更改“.inp”中的值并立即单击日期选择器打开的日历时，我会得到两个“change”事件侦听器。一个来自手动更改，另一个来自日期选择器更改。如何避免这种情况？

- Konstantin Vahrushev

---

无关紧要：您的闭合标签是错误的，应该是</script>。 - Jeff Noel

Answer 1

设置输入框的readOnly属性，这将帮助你仅通过图标来更改字段的值。

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

然后使用onSelect来获取选定的日期，如下所示：

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

- Parkash Kumar

---

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

Answer 2

试着使用onSelect函数，例如：

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

当用户从日历中选择日期时，此事件将被触发，而不是在用户输入字符时。

- brso05

Answer 3

您可以使用onSelect触发文本字段的更改事件，以使通过文本框或日期选择器编辑日期的行为相同。

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

- Shawn Balestracci

Answer 4

<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"/>

- Zaya Battogtokh

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 5

如果您正在使用Bootstrap日期选择器，可以执行以下操作：

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

更多细节请查看：Bootstrap日期选择器事件

- Mivaweb

Answer 6

谢谢大家的帮助，但我无法将字段设置为只读，这是要求。所以我必须自己进行研究。现在我发布我的最终解决方案。我进行了150毫秒的解绑定，然后重新绑定。 我为此制作了一个jQuery插件

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

myfunc(".inp");

- Konstantin Vahrushev

Answer 7

试试这个

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

- Rahul Koshti

Answer 8

谢谢大家，这是我使用的代码：

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表示日期选择器对象

- athene

Answer 9

如果您正在使用日期选择器界面，您也可以使用以下格式

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

onSelect: function(date) {

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

- krunal shimpi

---

感谢您的贡献，@krunal，但是如果能够添加一些关于为什么这会起作用的上下文信息将会更有帮助。 - Sid

Answer 10

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

- Jaspreet Kaur

---

如果您在日历中使用文本框，则可以使用上述方法。 - Jaspreet Kaur