JQuery UI DatePicker дать фокус на ввод без загрузки календаря снова в IE?

Question

Я знаю, что jquery ui datepicker теряет фокус, если дата выбирается с помощью мыши.Я хочу иметь возможность сосредоточиться на этом поле ввода.Итак, я сделал что-то вроде этого

    $("#patientDob").live("click", function() {
              $("#patientDob").datepicker({
            onSelect: function() {<br>
                this.focus();<br>
            // selecting a date moves the page, so remove the href attribute<br>
                $(".ui-datepicker a").removeAttr("href"); </p>

<pre><code>        },  

                        changeMonth: true,
                        changeYear: true,
                        duration: 'fast',
                        showOn: 'focus' 
    }).focus();
});

Это дает фокус на поле ввода, но в IE он продолжает загружать календарь снова.Это не делает это в Firefox или Chrome.Как я могу быть в состоянии сделать акцент на поле ввода, не загружая календарь снова и снова в IE?

Кроме того, если я делаю поле ввода только для чтения и после выбора даты в IE поле теряет фокус, и если я пытаюсь нажать клавишу возврата, он переносит меня на ранее посещенную страницу.любая помощь приветствуется!

Answer 1

Мое решение использует событие beforeShow, чтобы отменить показ для IE (так как в Chrome и Firefox он работает нормально без взлома). OnSelect и onClose устанавливают флаг перед возвратом фокуса в поле ввода. Смотрите мою полную рецензию на , а также отправляйте размытие и изменяйте события , если они вам нужны.

$("input.dateInput").datepicker({            
   /* fix buggy IE focus functionality */
   fixFocusIE: false,

   onSelect: function(dateText, inst) {
       this.fixFocusIE = true;
       $(this).focus();
   },
   onClose: function(dateText, inst) {
       this.fixFocusIE = true;
       this.focus();
   },
   beforeShow: function(input, inst) {
       var result = $.browser.msie ? !this.fixFocusIE : true;
       this.fixFocusIE = false;
       return result;
   }
});

Answer 2

У меня была такая же проблема, как и у вас. Чтобы решить эту проблему, я переопределил следующие методы datepicker:

$.datepicker._attachments = function(input, inst) {
    var appendText = $.datepicker._get(inst, "appendText");
    var isRTL = $.datepicker._get(inst, "isRTL");

    if (inst.append) {
        inst.append.remove();
    }
    if (appendText) {
        inst.append = $('<span class="' + $.datepicker._appendClass + '">' + appendText + "</span>");
        input[isRTL ? "before" : "after"](inst.append);
    }
    input.unbind("focus", $.datepicker._showDatepicker);
    if (inst.trigger) {
        inst.trigger.remove();
    }
    var showOn = $.datepicker._get(inst, "showOn");
    if (showOn == "focus" || showOn == "both") {
        input.focus($.datepicker._showDatepicker);
    }
    if (showOn == "button" || showOn == "both") {
        var buttonText = $.datepicker._get(inst, "buttonText");
        var buttonImage = $.datepicker._get(inst, "buttonImage");
        inst.trigger = $($.datepicker._get(inst,"buttonImageOnly") ? $("<img/>")
                .addClass($.datepicker._triggerClass).attr({
                    src : buttonImage,
                    alt : buttonText,
                    title : buttonText
                })
                : $('<button type="button"></button>')
                .addClass($.datepicker._triggerClass)
                .html('<span class="ui-button-icon-left ui-icon ui-icon-calendar"></span><span class="ui-button-text">ui-button</span>'));
        input[isRTL ? "before" : "after"](inst.trigger);
        inst.trigger.click(function() {
            if ($.datepicker._datepickerShowing
                    && $.datepicker._lastInput == input[0]) {
                $.datepicker._hideDatepicker();
            } else {
                $.datepicker._showDatepicker(input[0]);
            }
            return false;
        });

        input.bind('focus', function(e) {
            if (!$.datepicker._datepickerShowing) {
                inst.trigger.trigger('click');
            }
        });

        input.bind('click', function(e) {
            input.trigger('focus');
        });
    }
};


$.datepicker._selectDate = function(id, dateStr) {
    var target = $(id);
    var inst = $.datepicker._getInst(target[0]);
    dateStr = (dateStr != null ? dateStr : $.datepicker._formatDate(inst));
    if (inst.input) {
        inst.input.val(dateStr);
    }
    $.datepicker._updateAlternate(inst);
    var onSelect = $.datepicker._get(inst, "onSelect");
    if (onSelect) {
        onSelect.apply((inst.input ? inst.input[0]
        : null), [ dateStr, inst ]);
    } else {
        if (inst.input) {
            inst.input.trigger("change");
        }
    }
    if (inst.inline) {
        $.datepicker._updateDatepicker(inst);
    } else {
        if ($.datepicker._datepickerShowing) {
            inst.input.select();
        }
        setTimeout("$.datepicker._hideDatepicker()", 10);

        $.datepicker._lastInput = inst.input[0];
        $.datepicker._lastInput = null;
    }
};

Проверьте, работает ли он у вас ...

Answer 3

вызов даты в окне события document.ready