JQuery UI DatePicker не открывается до ранее выбранной даты, если формат не включает день

Я заметил неожиданное поведение в датчике jQuery UI.

Всякий раз, когда я использую формат, который не включает день, например, "ММ гг" (октябрь 2011 г.), средство выбора даты, когда отображается в следующий раз, указывает на сегодняшний день, а не на предыдущую дату.

Это не происходит, когда для формата используется, например, "дд / мм / гг" (01/10/2011).

Я думаю, что на самом деле это может быть ошибкой, и я сообщу об этом сообществу jQuery UI.

В любом случае, мне интересно, сталкивались ли вы с этой проблемой раньше и можете предложить мне обходной путь?

Пример, представляющий проблему, можно найти здесь.

РЕДАКТИРОВАТЬ: Для полноты: я представил эту проблему в сообщество JQuery UI как ошибку. Для интересующихся это можно найти здесь.

Источник

2 ответа

Решение

Ответ, который вы пометили как правильный, не совсем правильный. Позвольте мне сломать это.

$("#monthDate1").focus(function () {
    $(".ui-datepicker-calendar").hide();
    //add event to perform on done button click
    $(".ui-datepicker-close").click(function(){
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $("#monthDate1").datepicker('option', 'defaultDate', new Date(year, month, 1));
        $("#monthDate1").datepicker('setDate', new Date(year, month, 1));
    });
});

При выполнении $("#monthDate1").focus ты ждешь click событие каждый раз, когда ваш контроль переходит в focus что очень плохо.

Рассмотреть возможность запуска $.ajax каждый раз, когда ты click на $(".ui-datepicker-close"), Ваша функция будет запрашивать с сервера не один раз, а столько раз, сколько ваш контроль вступил в focus,

Fix:

Не связывать focus на $("#monthDate1") но вместо этого используйте live или же delegate(для версий jquery>= 1.9.3, если я не ошибаюсь).

Вот пример с live:

$(".ui-datepicker-close").live('click', function(){
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#monthDate1").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#monthDate1").datepicker('setDate', new Date(year, month, 1));
        });

Вот пример с delegate:

$("#ui-datepicker-div").delegate(".ui-datepicker-close", 'click', function(){
    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $("#monthDate1").datepicker('option', 'defaultDate', new Date(year, month, 1));
    $("#monthDate1").datepicker('setDate', new Date(year, month, 1));
});

ОБНОВИТЬ

Это обновление касается ответа, который я дал в своем комментарии. Это не совсем нормально для пользователя $(".ui-datepicker-calendar").hide(); внутри focus событие, потому что это немного глючит.

Вот как это сделать без проблем:

var dynamicStyle = $("<style> .ui-datepicker-calendar { display: none; } </style>")
                        .attr("id", "dynamicDatepickerStyle");
$("#monthDate1").datepicker({
    beforeShow: function ()
    {
        $("body").append(dynamicStyle);
    },

    onClose: function ()
    {
        $("#dynamicDatepickerStyle").remove();
    }
});

это собирается добавить style который будет hide calendar когда ты open datepicker и воля remove style когда datepicker закрыта для того, чтобы это не повлияло на другие средства выбора даты на странице. Это если вы хотите, чтобы на странице было несколько указателей даты, некоторые с calendar а некоторые без него.

Источник

Я решил вашу проблему. Пожалуйста, проверьте эту ссылку http://jsfiddle.net/nEGTv/3/

Просто добавьте эту строку в свой код $("#monthDate1").datepicker('option', 'defaultDate', new Date(year, month, 1)); в вашем $("#monthDate1").focus функция.

Источник
Другие вопросы по тегам