Конфликт с двумя jquery datepickers на одной странице

Ответ 1

UPDATE: Похоже, что описанное ниже поведение было рассмотрено в другом вопросе stackoverflow здесь:
Предотвратить диалог JQuery UI от установки фокуса на первое текстовое поле

Извините за "повторяющийся" вопрос - если бы я знал, что это была проблема, я бы быстро это понял!

############################################### #################################

Ну, разрешение очень простое, и, возможно, кто-то может просветить меня, почему он работает таким образом, потому что я немного невежествен в данный момент.

Вот что я сделал:
Я добавил еще два текстовых поля ввода в форму (они были необходимы) и переупорядочил макет, так что одно из этих новых полей ввода было "первым" элементом (в верхнем левом углу), например:

\---/\---/\---/_______________
/                            /
\                            \
/  TEXTFIELD1   DATEPICKER1  /
\                            \
/  TEXTFIELD2   DATEPICKER2  /
\                            \
/                            /
\                            \
/____________________________/

Внезапно проблема исчезла! Однако я замечаю интересное поведение:
Когда я выбираю дату в дате даты, курсор сразу же возвращается к первому текстовому полю. Так что, если это произошло, когда у меня были датпикеры без текстовых полей, это поведение означало бы, что курсор немедленно вернется к первому datepicker, который мог бы вызвать проблему, которую я имел.

Теперь, что касается ПОЧЕМУ, он работает таким образом, я понятия не имею. Я попытался установить параметры tabindex для различных текстовых полей /datepickers, но это не изменило поведение.

Во всяком случае, я ценю вклад от всех, кто подшутил - это была странная проблема, но я никогда не забуду, как исправить это сейчас. Спасибо всем за вашу помощь!

Ответ 2

Я думаю, у вас есть другой код, который мешает javascript как это: http://jsfiddle.net/fMD62/

работает отлично (с jquery 1.9.1 и jqueryui 1.9.2

возможно, попробуйте

$(function() {
    $("#datepicker1,#datepicker2").datepicker();
});

Ответ 3

Попробуй этого друга: в вашем JS

 $(function() {   
       $( "#from" ).datepicker({   
      defaultDate: "+1w",  
      changeMonth: true,   
      numberOfMonths: 1,  
      onClose: function( selectedDate ) {  
        $( "#to" ).datepicker( "option", "minDate", selectedDate );  
      }  
    });  
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });  
  });  
  

	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Start date: <input type="text" id="from" name="from"> 
End date: <input type="text" id="to" name = "to">

Ответ 4

Это полный выстрел в темноте, но вы пытались инициализировать каждого отдельно? Что-то вроде следующего

$(function() {
    $('.datepicker').each(function(){
        $(this).datepicker();
    });
});

Вероятно, это то, о чем говорили другие, и вы сталкиваетесь с каким-то вмешательством в ваш код, но это стоит того, чтобы быстро выстрелить.

Ответ 5

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

Использует ли ваш фактический код разные идентификаторы и имена для датпикеров?

Ответ 6

Попробуйте помещать содержимое диалогового окна JQuery UI в IFrame. Это может помочь вам решить некоторые из ваших проблем.

\---/\---/\---/_______________
/                            /
\  ####IFRAME######          \
\  #              #          \
/  #DATEPICKER1   #          /
\  #              #          \
/  #DATEPICKER2   #          /
\  #              #          \
/  ################          /
\                            \
/____________________________/

Ответ 7

ОБЪЯСНЕНИЕ проблемы

У меня такая же проблема, и она очень разочаровывает. Я искал исходный код jquery и нашел это:

if ( $.ui.dialog.overlayInstances ) {
    this._on( this.document, {
        focusin: function( event ) {
            if ( !$( event.target ).closest(".ui-dialog").length ) {
                event.preventDefault();
                $(".ui-dialog:visible:last .ui-dialog-content")
                    .data("ui-dialog")._focusTabbable();
            }
        }
    });
}

Поэтому, когда вы устанавливаете фокус в элементе, который находится не внутри .ui-dialog, он вызывает функцию _focusTabbable(), которая устанавливает фокус на первый вход в диалоговом окне.

Проблема заключается в том, что $.datepicker создает div на конце тела - поэтому он находится вне .ui-dialog

Если есть другой вход, который _focusTabbable() будет давать фокус в порядке, так как datepicker может справиться с этим. Но если этот вход привязан к датпикеру, он закроет предыдущий datepicker, откройте другой на первом входе и не будет выбран выбор предыдущей даты.

Одно из возможных решений

Решение в этом случае имеет вход, который будет принимать первый фокус в диалоговом окне и не имеет datepicker на нем.

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

<span class="ui-helper-hidden-accessible"><input type="text" /></span>

Ответ 8

Случай 1:
Комментарий @antony (включая ссылку jsfiddle ниже вопроса) работает как из версия jquery-1.9.1 и 1.9.2/jquery-ui.js

Случай 2:
OP, где datepicker1 работает хорошо, но выбор datepicker2 откроется datepicker1
версия: jQuery v1.9.0 и jQueryui v1.10.0

Случай 3:
Мой случай, когда выбор datepicker1 работает хорошо, но выбор datepicker2 не имеет никакого эффекта.
версия: jquery-3.1.1.min.js и jQueryui v1.12.1

Решение для случая 3:
initialize date1 first $('date1').datepicker() date1 будет работать
Для даты2 сначала уничтожьте дату1, затем инициализируйте date2

$('date1').datepicker('destroy');
$('date2').datepicker();

Теперь для date1 уничтожить date2 и инициализировать date1.

Ответ 9

в архиве js:

$("#fecha_1").datepicker({
    dateFormat: "dd/mm/yy",
    dayNames: "Domingo Lunes Martes Miercoles Jueves Viernes Sabado".split(" "),
    dayNamesMin: "Do Lu Ma Mi Ju Vi Sa".split(" "),
    dayNamesShort: "Do Lu Ma Mi Ju Vi Sa".split(" "),
    monthNames: "Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre".split(" "),
    monthNamesShort: "Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic".split(" "),
    prevText: "Ant",
    nextText: "Sig",
    currentText: "Hoy",
    changeMonth: !0,
    changeYear: !0,
    showAnim: "slideDown",
    yearRange: "1900:2100"
});

$("#fecha_2").datepicker({
    dateFormat: "dd/mm/yy",
    dayNames: "Domingo Lunes Martes Miercoles Jueves Viernes Sabado".split(" "),
    dayNamesMin: "Do Lu Ma Mi Ju Vi Sa".split(" "),
    dayNamesShort: "Do Lu Ma Mi Ju Vi Sa".split(" "),
    monthNames: "Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre".split(" "),
    monthNamesShort: "Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic".split(" "),
    prevText: "Ant",
    nextText: "Sig",
    currentText: "Hoy",
    changeMonth: !0,
    changeYear: !0,
    showAnim: "slideDown",
    yearRange: "1900:2100"
}); 

на странице ur: <input type="text" id="fecha_1"><input type="text" id="fecha_2">