Question

我有datepicker

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

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

当我第一次更改'.inp'时，手动输入一个值，然后立即点击datepicker的打开日历。我得到两个'更改'事件监听器。首先从手动更改，然后从datepicker更改。我怎么能避免这个？

Answer 1

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

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

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

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

Answer 2

尝试使用onSelect功能，如：

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

当他们从日历中选择日期而非他们正在输入时，将会触发此事。

Answer 3

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

$('.inp').datepicker({
  onSelect: function() {
    return $(this).trigger('change');
  }
);

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

Answer 4

如果您使用的是bootstrap日期选取器，则可以执行以下操作：

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

有关详细信息，请参阅：Bootstrap Datepicker events

Answer 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");

Answer 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，是datepicker值，x2是datepicker对象

Answer 7

尝试一下

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

Answer 8

如果您使用的是datepiker ui，那么您也可以使用以下甲酸盐

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

onSelect: function(date) {

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

Answer 9

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

上触发事件

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

9 个答案: