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事件！

回答

相关问题