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

У меня есть код javascript, с помощью которого я хочу выполнить следующее. Я хочу, когда я нажму на кнопку, чтобы она появилась, но параметр выбора даты даты не появляется автоматически (но в моем случае он открывается). Так что, другими словами, я палочку отключил этот автоокен. Вот скриптВыбор даты автоматически открывается

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"  type="text/css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"  type="text/javascript"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
     $(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(); 
      }); 
     }); 
    </script> 
    <input type="button" value="addclass" id="button"> 
    <div id="order-popup" style="display:none;" class="popup-content already-ordered"> 
     <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> 
</body>

источник

2012-03-17 Anonymous

Любое использование? http://stackoverflow.com/questions/932420/jquery-ui-datepicker-opens-automatically-within-dialog –

Я бы пересмотрел календарь и сделаю поле только для чтения и только отправлю данные, если вы нажмете на кнопку, чтобы открыть calendar –

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

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

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

Working example here

источник

2012-03-17 12:20:38 ManseUK

Как удалить фокус? –

@ user1204905 Зачем вам это? вы идете ко мне пользователь, нажав на вход, - который откроет datepicker! – ManseUK

вы сказали, что «у datapicker загружен на фокус», и я хочу точно противоположное. –

Попробуйте поместить инициализацию 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(); 
          } 

}); 
});

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

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

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

источник

2012-03-17 12:19:34

это не работало –

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

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

<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>

источник

2012-03-17 12:47:30 Anthony

Я только что ввел этот тэг и просто скрылся. Все отлично работало. –

Будьте осторожны, как вы его спрячете. В моем тесте, установив его для отображения: ни один не приводит к его пропуску, и, следовательно, вход снова находится в фокусе. – Anthony

Чтобы быть честным, я didnt undesrtand, что вы имели в виду, но пряча пустой тэг p работал нормально. Есть ли какие-то проблемы, которые могут возникнуть в этой ситуации? –

Если вы не хотите, чтобы сосредоточить внимание на 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, и находится вне экрана, поэтому он не будет отображаться. Имейте в виду, что даты должны всегда выбираться, позволяя пользователю писать, это риск из-за форматов даты, разделителей и т. Д.

источник

2012-03-17 12:52:32

Excellet, так как я хочу, чтобы DatePicker работал как обычно (не нравится дополнительные кнопки). –

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

источник

2013-01-04 09:40:20

Вы можете решить эту проблему, просто удалив фокус после $ ("# 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(); 
     }); 
    });

источник

2013-01-17 19:45:12

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

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

источник

2015-04-08 10:33:43 Robin

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

источник

2018-01-09 18:52:29 Kevbo

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

ответ

Смежные вопросы