JQuery Datepicker, не может вызвать событие onSelect вручную!

Question

Я использую средство выбора даты jquery, где список элементов заполняется из вызова ajax всякий раз, когда дата выбирается из встроенного объекта 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');

});

Любая помощь приветствуется:)

Answer 1

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

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

});

Answer 3

Вот то, что я придумал и, кажется, лучшее решение:

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

И это работает как шарм

Answer 4

есть другое решение, чтобы узнать, когда выбрать дату.

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

Answer 5

Вот так я обошёл ту же проблему. Просто зарегистрируйте событие с кодом, который вы хотите вызвать, затем вызовите это событие из метода onSelect внутри datepicker, а затем вызовите это событие в любое другое время.

$(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");
});

Answer 6

Вы можете попробовать что-то вроде этого -

    $(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"
        );
}

Answer 7

Принятый ответ не был чем-то, что я мог бы использовать, потому что я использовал общий код, который добавил функциональность горячих клавиш во все средства выбора даты в моем веб-приложении (чтобы установить значение на сегодня, +1 день, +1 месяц и т. Д.), И хотел убедиться, что onselect был вызван для проверки значения даты, которое было вычислено с помощью горячей клавиши.

Я взял это из исходного кода файла 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]);
}

Answer 8

Я пытался сделать почти то же самое, но в моем случае мне приходилось подбирать встречи при нагрузке, а не при выборе.

Хотя это не является обязательным для вашего решения, я хотел бы добавить свое решение, поскольку оно может помочь другим, кто хочет сделать то же самое при загрузке.

Я изменил 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;
};