JQuery Datepicker，无法手动触发onSelect事件！

我正在使用jquery的datepicker，只要从内联datepicker对象中选择日期，就会从ajax调用中填充项目列表。 该脚本工作正常，但我无法触发onSelect事件来填充我的初始项目列表。

我可以通过最初使用php填充列表来解决这个问题，但我真的想避免这种情况。

$(document).ready(function(){ //create date pickers $("#date_calendar").datepicker( { changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', defaultDate: $.datepicker.parseDate("ymd", $('#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'); }); 

任何帮助表示赞赏:)

Answer 1

难道你不能将它重构为它自己的一个函数，你可以重用它吗？ 严格来说，日期选择器选择并不是页面加载时发生的事情。 你只想做与确实选择了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("ymd", $('#date').val()), onSelect: populateList }).disableSelection(); // i'm not bothering to pass the input params here, because you're not using them anyway populateList(); }); 

Answer 2

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

Answer 3

这是我想出来的，似乎是最好的解决方案：

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

它就像一个魅力

Answer 4

你可以试试这样的东西 –

  $(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("ymd", $('#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" ); } 

Answer 5

这就是我解决同样问题的方法。 只需使用您要调用的代码注册事件，然后从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("ymd", $('#date').val()), onSelect: function(dateText, inst) { $("#date_calendar").trigger("datepickeronSelect"); } }).disableSelection().trigger("datepickeronSelect"); }); 

Answer 6

还有另一种解决方案可以找出日期选择的时间。

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

Answer 7

我试图做几乎相同的事情，但在我的情况下，我必须在负载而不是选择上预约。

虽然这不是您的解决方案所必需的，但我想添加我的解决方案，因为它可能会帮助其他想要在加载时执行相同操作的人。

我修改了jquery.ui.datepicker.mobile.js以突出显示具有beforeShowDay约会的日期 ，加载约会onSelect等。您可以通过在datepicker重写函数的底部添加以下行来简单地初始化约会：

 //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; }; 

Answer 8

接受的答案不是我可以使用的，因为我使用的通用代码在我的Web应用程序中的所有日期选择器上添加了热键function（将值设置为今天，+ 1天，+ 1个月等），并且想要制作确保调用onselect来validation使用热键计算的日期值。

我从datepicker.js文件的源代码中获取了这个。 注意this应该用你的datepicker元素替换。 在我的情况下，我从keydown事件中调用它。

 // 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]); }