JQuery Datepicker無法手動觸發onSelect事件！

我正在使用jquery的datepicker，每當從內聯日期選擇器對象中選取日期時，將從ajax調用填充項目列表。該腳本工作完美，但我無法觸發onSelect事件來填充我的初始項目列表。JQuery Datepicker無法手動觸發onSelect事件！

我可以解決這個問題，只是最初使用PHP填充列表，但我真的想避免這種情況。

$(document).ready(function(){ 

     //create date pickers 
    $("#date_calendar").datepicker(
    { 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'yy-mm-dd', 
     defaultDate: $.datepicker.parseDate("y-m-d", $('#date').val()), 
     onSelect: function(dateText, inst) 
      { 
       alert('onSelect triggered! Yay!'); 
       $('#date').val($.datepicker.formatDate("yy-mm-dd", $('#date_calendar').datepicker('getDate'))); 

       // Ajax for populating days when selected 
       $.post(
        "server_requests/show_day.php", 
         { 
         date: $('#date').val(), 
         user_id: $('#user_id').val() 
         }, 
        function(data) 
        { 
         //return function 
         $('#my_day_tasks').html(data.resultTable); 
        }, 
        "json" 
       ); 
      } 
    }).disableSelection(); 

    $("#date_calendar").trigger('onSelect'); 

});

任何幫助表示讚賞:)

來源

2010-01-28 Gazillion

你不能只是重構，爲它自己的功能，你重用？嚴格來說，日期選擇器選擇不是真的是頁面加載時發生了什麼。你只是想要做到與datepicker確實被選中時發生的相同的事情。

function populateList(dateText, inst) 
{ 
    alert('alert test'); 
    $('#date').val($.datepicker.formatDate("yy-mm-dd",$('#date_calendar').datepicker('getDate'))); 

    // Ajax for populating days when selected 
    $.post("server_requests/show_day.php", 
     { 
      date: $('#date').val(), 
      user_id: $('#user_id').val() 
     }, 
     function(data) 
     { 
      //return function 
      $('#my_day_tasks').html(data.resultTable); 
     }, 
     "json" 
    ); 
} 

$(document).ready(function(){ 
    //create date pickers 
    $("#date_calendar").datepicker(
    { 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'yy-mm-dd', 
     defaultDate: $.datepicker.parseDate("y-m-d", $('#date').val()), 
     onSelect: populateList 
    }).disableSelection(); 

    // i'm not bothering to pass the input params here, because you're not using them anyway 
    populateList(); 

});

來源

2010-01-28 15:19:40

你知道，有時候你的東西看起來那麼難你變得愚蠢:)這太有道理了。太感謝了！ – Gazillion 2010-01-28 15:29:52

這隻適用於如果你只有一個日期選擇器 – 2013-10-24 20:01:26

我已經有一個單獨的功能，就像你在這裏提到的，但不知怎的，甚至沒有想到要手動調用它。哇。感謝您的明顯，但非常有幫助的觀察！ – Matt 2014-11-07 16:14:47

你可以嘗試這樣的事情 -

$(document).ready(function(){ 
    //when page loads      
    SetDateTime(null); 
    //create date pickers 
    $("#date_calendar").datepicker(
    { 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'yy-mm-dd', 
     defaultDate: $.datepicker.parseDate("y-m-d", $('#date').val()), 
     onSelect: function(dateText, inst) 
      { 
       SetDateTime(dateText); 
      } 
    }).disableSelection(); 

    $("#date_calendar").trigger('onSelect'); 
}); 

function SetDateTime(selectedDate) 
{ 
    if(selectedDate == null) 
    { 
     //get todays date 
     var dateNow = new Date(); 
     //if its a single digit day, add a zero before it 
     var sDay = dateNow.getDate().toString(); 
     if(sDay.length == 1) 
     { 
      sDay = "0" + sDay; 
     } 
     selectedDate = dateNow.getFullYear() + "-" + (dateNow.getMonth() + 1) + "-" + sDay; 

     //load timetable 
     ShowDay(selectedDate); 
    } 
    else 
    { 
     var ds = selectedDate.split("-"); 

     //load timetable 
     ShowDay(selectedDate); 
    } 
} 

function ShowDay(dateToday) 
{ 
     alert('onSelect triggered! Yay!'); 
     $('#date').val($.datepicker.formatDate("yy-mm-dd", $('#date_calendar').datepicker('getDate'))); 

     // Ajax for populating days when selected 
     $.post(
      "server_requests/show_day.php", 
       { 
       date: dateToday, 
       user_id: $('#user_id').val() 
       }, 
      function(data) 
      { 
       //return function 
       $('#my_day_tasks').html(data.resultTable); 
      }, 
      "json" 
     ); 
}

來源

2010-01-28 15:30:11 TGuimond

內部的嗯，這個代碼編輯器似乎不喜歡我的代碼。 – TGuimond 2010-01-28 15:32:41

4空格縮進，或者按'101010'按鈕，用於代碼格式。 – 2010-01-28 15:52:30

謝謝你。它實際上似乎已經整理出來了.. – TGuimond 2010-01-28 16:01:43

我試圖做幾乎同樣的事情，但對我來說我必須在負載鞋任命，而不是選擇。

雖然這不是您的解決方案所必需的，但我想添加我的解決方案，因爲它可能會幫助其他人在加載時執行相同操作。

我修改了jquery.ui.datepicker.mobile.js突出與約會天beforeShowDay，負載任命ONSELECT等您可以簡單地通過在底部添加以下代碼初始化你的約會日期選擇器重寫功能：

//rewrite datepicker 
$.fn.datepicker = function(options){ 

    // ... all the options and event stuff 

    function initAppointments() { 
     // select the 'selected' days to trigger the onSelect event# 
     // and initalize the appointments within the event handler 
     $(".ui-datepicker-calendar a.ui-state-active", dp).trigger('click'); 
     updateDatepicker(); 
    } 

    //update now 
    updateDatepicker(); 

    // and on click 
    $(dp).click(updateDatepicker); 
    $(dp).ready(initAppointments); // new 

    //return jqm obj 
    return this; 
};

來源

2011-09-08 13:00:48 Smamatti

這就是我如何解決同樣的問題。只需在要調用的代碼中註冊一個事件，然後從datepicker中的onSelect方法調用該事件，然後在任何其他時間調用該相同的事件。

$(document).ready(function(){ 

    // Onselect event registration 
    $("#date_calendar").bind("datepickeronSelect", function(){ 

     alert("onSelect called!"); 

    }) 

    //create date pickers 
    $("#date_calendar").datepicker(
    { 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'yy-mm-dd', 
     defaultDate: $.datepicker.parseDate("y-m-d", $('#date').val()), 
     onSelect: function(dateText, inst) 
     { 
      $("#date_calendar").trigger("datepickeronSelect"); 
     } 
    }).disableSelection().trigger("datepickeronSelect"); 
});

來源

2012-02-24 00:56:04 Simon

還有另一種解決方案來找出日期選擇。

$(".uc_datepicker :text").datepicker(); 
$(".uc_datepicker :text").click(function() { 
    $(".ui-datepicker-calendar a").click(function() { 
     alert("date selected"); 
    }); 
});

來源

2012-11-17 08:43:03 mehdi

$('.ui-datepicker-current-day').click();

來源

2012-12-03 23:40:51 flatr0ze

這是我剛開始使用的方法，但在調用「setDate」方法時需要一個不同的月份，這是不可靠的。在那種情況下，使用David的解決方案起作用，並且這是最可靠的整體。 – Matt 2014-11-07 16:18:12

接受的答案是不是我可以使用，因爲我用，在我的Web應用程序上的所有datepickers加熱鍵功能的通用代碼（到值設置到今天，+1天，+1月等），並且要確保調用onselect來驗證用熱鍵計算的日期值。

我把這個從datepicker.js文件的源代碼。請注意，應使用您的datepicker元素替換thiat this。在我的情況下，我從事件中調用這個。

// this is SUCH a hack. We need to call onselect to call any 
// specific validation on this input. I stole this from the datepicker source code. 
var inst = $.datepicker._getInst(this), 
onSelect = $.datepicker._get(inst, "onSelect"); 
if (onSelect) { 
    dateStr = $.datepicker._formatDate(inst); 
    onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); 
}

來源

2014-02-14 18:00:02

這裏是我想出了，似乎是最好的解決辦法：

var inst = $.datepicker._getInst($("#date")[0]); 
$.datepicker._get(inst, 'onSelect').apply(inst.input[0], [$("#date").datepicker('getDate'), inst]);

它就像一個魅力

來源

2015-05-26 07:57:07 AdrianPop

這應該是一個答案。 – MaxZoom 2017-10-20 19:54:15

JQuery Datepicker無法手動觸發onSelect事件！

回答

相關問題