JQuery Datepicker，不能手动触发onSelect事件！答案

【问题标题】：JQuery Datepicker, can't trigger onSelect event manually!JQuery Datepicker，不能手动触发onSelect事件！
【发布时间】：2010-01-28 15:12:11
【问题描述】：

我正在使用 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("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');

});

任何帮助表示赞赏:)

【问题讨论】：

标签： jquery event-handling datepicker

【解决方案1】：

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

【讨论】：

这是我一开始使用的方法，但在调用“setDate”方法时使用的日期会带我到不同的月份，这并不可靠。在这种情况下，使用 David 的解决方案是有效的，并且总体上是最可靠的。

【解决方案2】：

你不能把它重构为一个你自己的函数，你可以重复使用它吗？严格来说，日期选择器选择并不是真正在页面加载时发生的事情。您只想做与确实选择日期选择器时完全相同的事情。

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(); 

});

【讨论】：

你知道...有时你看东西太难以至于变得愚蠢:) 这太有道理了。谢谢一百万！
这只有在你只有一个日期选择器时才有效
我已经有一个像你在这里提到的单独的函数，但不知何故甚至没有想到手动调用它。哇。感谢您的明显但非常有帮助的观察！
@ogc-nick 在调用函数时只需发送日期选择器的id，并在函数内部使用它

【解决方案3】：

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

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

它就像一个魅力

【讨论】：

这应该是一个答案。
这其实是不正确的，$("#date").datepicker('getDate') 给你的是Date对象，但是第一个参数应该是日期字符串。

【解决方案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("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"
        );
}

【讨论】：

4个空格缩进，或者按'101010'按钮，代码格式。

【解决方案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("y-m-d", $('#date').val()),
        onSelect: function(dateText, inst)
        {
            $("#date_calendar").trigger("datepickeronSelect");
        }
    }).disableSelection().trigger("datepickeronSelect");
});

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案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;
};

【讨论】：

【解决方案8】：

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

我是从 datepicker.js 文件的源代码中获取的。请注意 thiat 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]);
}

【讨论】：

认为您应该比 AdrianPop 获得 +1，因为您的答案比他早一年多，而您的答案更可靠。您还提到了 formatdate，这是 onSelect 函数的第一个参数所必需的。但是，您确实应该定义“this”所引用的内容。您应该让我们知道它是输入框的 DOM 元素

【解决方案9】：

我用另一种方式，触发2个事件

设置日期 jQuery('#my-calendar').datepicker( "setDate", "09/29/2020" )
触发点击事件 jQuery('#my-calendar .ui-state-active').trigger('click')

【讨论】：