Выбор даты автоматически открывается

Ответ 1

Причина, по которой показывает datepicker, заключается в том, что по умолчанию загружается input the datapicker по умолчанию focus.. см. здесь - это потому, что его первый input на форме.... если вы добавите еще один input до первого его штрафа → http://jsfiddle.net/JXtBM/1/

Один из способов решения этой проблемы - использовать кнопку для запуска открытия датпикера:

showOn: "button",
buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,

Рабочий пример здесь

Ответ 2

Если вы не хотите сосредоточиться на datepicker, вы можете просто поставить перед ними еще один вход и сделать его "невидимым"

<input type="button" value="addclass" id="button">
<div id="order-popup" style="display:none;" class="popup-content already-ordered">
    <input style="height:0px; top:-1000px; position:absolute" type="text" value="">
    <input type="text" id="datePicker3" name="datepickerFrom" value="">
    <br/>
    <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px">
    </form>
</div>​

В этом случае вход имеет высоту 0px и выходит за пределы экрана, поэтому он не будет отображаться. Имейте в виду, что даты всегда должны быть выбраны, что позволяет пользователю писать, это риск из-за форматов даты, разделителей и т.д.

Ответ 3

Как сказал ManseUK, это потому, что метод диалога автоматически выбирает первый элемент "tabbable" внутри родительского элемента. Это сложно сделать, как показано в другом вопросе.

Один способ обхода (который, как мне кажется, выглядит странно, но работает), заключается в том, чтобы установить индекс вкладок в другой элемент над входами, например:

<div id="order-popup" style="display:none;" class="popup-content already-ordered">
    <p tabindex="1">Choose Dates:</p>
    <input type="text" id="datePicker3" name="datepickerFrom" value="" />
    <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px" />
</div>

Ответ 4

установите индекс вкладки в другой элемент, чтобы решить проблему следующим образом:

**<label tabindex="1">From Date:</label>**
<input type="text" name="from_date" id="from_date" readonly="readonly"  class="hasDatepicker">

<label>To Date</label>
<input type="text" name="to_date" id="to_date"  readonly="readonly" class="hasDatepicker">

Ответ 5

Попробуйте поставить инициализацию datepicker в обратном вызове документа, например:

$(document).ready(function(){

var dates2 = $( "#datePicker3,#datePicker4" ).datepicker({
                            autoOpen:false,
                            minDate:0,
                            changeMonth: true,
                            numberOfMonths: 1,
                            onSelect: function( selectedDate ) {
                                var option = this.id == "datePicker3" ? "minDate" : "maxDate",
                                instance = $( this ).data( "datepicker" ),
                                date = $.datepicker.parseDate(
                                    instance.settings.dateFormat ||
                                    $.datepicker._defaults.dateFormat,
                                    selectedDate, instance.settings );
                                dates2.not( this ).datepicker( "option", option, date );
                                calculate_total_price();
                            }

 });
});

и функция click содержит только:

$("#order-popup").dialog();
$("#order-popup").show();

Я не уверен на 100%, что это сработает, но, по крайней мере, это правильный способ выполнить инициализацию (если у вас уже есть эта страница, инициализируйте готово)

Ответ 6

Вы можете решить эту проблему, просто удалив фокус после $( "# order-popup" ). show();

    $(document).ready(function () {
        $("#button").click(function () {
            var dates2 = $("#datePicker3,#datePicker4").datepicker({
                autoOpen: false,
                minDate: 0,
                changeMonth: true,
                numberOfMonths: 1,
                onSelect: function (selectedDate) {
                    var option = this.id == "datePicker3" ? "minDate" : "maxDate",
                        instance = $(this).data("datepicker"),
                        date = $.datepicker.parseDate(
                        instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                    dates2.not(this).datepicker("option", option, date);
                    calculate_total_price();
                }

            }); ///
            $("#order-popup").dialog();
            $("#order-popup").show();
            $('#datePicker3, #datePicker4').blur();
        });
    });

Ответ 7

Запуск "размытия" после создания решает проблему для меня. Я вижу это как рабочий стол. Я не хочу добавлять кнопку для открытия календаря или добавления дополнительных входов в мой документ.

$('[data-datepicker="datepicker"]').datepicker().trigger('blur');

Ответ 8

Лучший вариант - установить атрибут "автофокусировка" для другого элемента. Когда jquery откроет диалоговое окно, он будет искать элемент с атрибутом автофокуса и установить фокус на него. Если ни один не найден, фокус устанавливается на первый видимый элемент. <input type="text" id="txtDescription" autofocus />