Jquery datepicker 更改事件觸發器和輸入的默認更改事件

Question

我有日期選擇器

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

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

當我第一次更改 '.inp' 時手動輸入一個值，然后我立即單擊 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

如果您使用引導程序日期選擇器，您可以執行以下操作：

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

有關更多詳細信息，請查看： Bootstrap Datepicker 事件

Answer 5

謝謝！ 每個人，但我不能使字段只讀一個，這是要求。 所以我不得不重新審視自己。 所以我發布了我的最終解決方案。 我解綁了 150 毫秒，然后再次綁定。 我為此制作了一個 jquery 插件

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，是日期選擇器值，x2 是日期選擇器對象

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

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

Answer 10

如果您使用的是 jquery 的日期選擇器，則不需要日歷事件觸發。 您可以在文本框“textchanged”上觸發事件