Несколько datePicker на одной странице в динамической форме не работает, почему?

Question

[akula22]

На странице динамическая форма где создаются несколько виджетов datePicker

<?= $form->field($modelAddress,  "[{$i}]date")->widget(\yii\jui\DatePicker::className()) ?>

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

в исходнике страницы получается вот это

<input type="text" id="ordertemplate-0-date" name="OrderTemplate[0][date]" class="hasDatepicker" aria-invalid="true">
......
<input type="text" id="ordertemplate-1-date" name="OrderTemplate[1][date]" aria-invalid="true">

почему-то исчезает class="hasDatepicker" пробовал прописывать его явно, все равно не помогает, и в этом ли причина проблемы?

Может кто знает как решить эту лабуду, пробовал и виджет от катрика, тоже самое, первый срабатывает остальные нет (

Answer 1

[Дмитрий]

Добрый день.
Чтобы работали все добавляемые DatePicker Вам надо сначала принудительно удалить dataPicker, а потом заново, принудительно, инициализировать все видимые виджеты.
Выглядит это приблизительно так:

echo $form->field($model, '[0]date')->widget(DatePicker::className(),[
                'options' => [
                    'data' => [
                        'picker' => 'datepicker'
                    ]
                ]
         ])

а ниже, или в отдельном файле, будет такой js код:

$('#plus').on('click', function(){
       /* какой-то Ваш код */
       $('#testForm')..find('.hasDatepicker').datepicker('destroy');
       $('#testForm').find('input[data-picker=datepicker]').datepicker();
       /* какой-то Ваш код */
    })

Пришлось добавить параметр "data-picker", так как при "destroy" удаляется класс "hasDatepicker"

Comments

[akula22]

хм...ну вот допустим я решил делать katrik-datapicker, в исходнике такой код певрого виджета

<input type="text" id="ordertemplate-0-date" class="form-control krajee-datepicker" name="OrderTemplate[0][date]" data-picker="datepicker" data-datepicker-source="ordertemplate-0-date-kvdate" data-datepicker-type="2" data-krajee-kvdatepicker="kvDatepicker_00000000" aria-invalid="true">

Если я правильно понял то я вставляю вот такой код в низ страницы

$script = <<< JS
$('.add-item').on('click', function(){
       /* какой-то Ваш код */
       $('#dynamic-form').find('.krajee-datepicker').datepicker('destroy');
       $('#dynamic-form').find('.krajee-datepicker').datepicker();
       /* какой-то Ваш код */
    })
JS;
$this->registerJs($script, yii\web\View::POS_END);

не работает, подкорректируйте пожалуйста

[Дмитрий]

akula22, изначально Вы говорили о yii\jui\DatePicker, а теперь о виджете kartik...
То, что я Вам дал - работает в yii\jui\DatePicker
Определитесь, с каким виджетом Вы собираетесь работать.

[Дмитрий]

akula22, в любом случае, смысл в том, что заново инициализировать виджеты.
Смотрите в документации от kartik, как он это рекомендует делать. А так же в исходном коде самого виджета.

[akula22]

slo_nik, все равно не срабатывает, вот исх. код второго полученного инпута

<input type="text" id="ordertemplate-1-date" name="OrderTemplate[1][date]" data-picker="datepicker" aria-invalid="true">

js

$script = <<< JS
$('.add-item').on('click', function(){
       $('#dynamic-form').find('.hasDatepicker').datepicker('destroy');
       $('#dynamic-form').find('input[data-picker=datepicker]').datepicker();
   })
JS;
$this->registerJs($script, yii\web\View::POS_END);

элементы находит 100%, ошибок в консоле нет, вот не уверен что он его разрушает

[Дмитрий]

akula22, Вы с yii\jui\DatePicker уже работаете?
Покажите, как Вы формируете input с виджетом и как обрабатываете в js.
Мой пример отлично работает.

[Дмитрий]

вот не уверен что он его разрушает

akula22, проверить можно визуально, посмотрите исходный код, должно удалить класс "hasDatePicker"

[akula22]

slo_nik,

проверить можно визуально, посмотрите исходный код, должно удалить класс

да он мигает, но остается. Второй строчкой .find('input[data-picker=datepicker]').datepicker(); видимо опять создает.

виджет формирую так, это в цикле форич, т.к у меня динамическая форма

<?php foreach ($modelsAddress as $i => $modelAddress): ?>
<?= $form->field($modelAddress, "[{$i}]date")->widget(\yii\jui\DatePicker::className(), [
                                            'options' => [
                                                'data' => [
                                                    'picker' => 'datepicker'
                                                ]
                                            ]
                                        ]) ?>

и вот JS

$script = <<< JS
$('.add-item').on('click', function(){
       $('#dynamic-form').find('.hasDatepicker').datepicker("destroy");
       $('#dynamic-form').find('input[data-picker=datepicker]').datepicker();
   })
JS;
$this->registerJs($script, yii\web\View::POS_END);

динамическую форму использую расширение https://github.com/wbraganca/yii2-dynamicform
может из-за него касяк, в исходнике страницы висит еще такя функция на создание формы

jQuery("#dynamic-form").on("click", ".add-item", function(e) {
    e.preventDefault();
    jQuery(".dynamicform_wrapper").triggerHandler("beforeInsert", [jQuery(this)]);
    jQuery(".dynamicform_wrapper").yiiDynamicForm("addItem", dynamicform_45e1ce45, e, jQuery(this));
});

[akula22]

Попробовал просто две формы нарисовал, как видимо ты делаешь, так да все работает, а вот в динамической не хочет

[akula22]

slo_nik, есть не большой прогресс :) начинает работать если добавить уже третью форму, тогда начинает работать второй, вообщем на -1 срабатывает. Видимо при нажатие кнопки еще нет обьекта на котором запускать datePicker

[Дмитрий]

Попробовал просто две формы нарисовал, как видимо ты делаешь

akula22, у меня одна форма и несколько блоков, которые содержат набор полей, в том числе и datepicker.
У Вас, как я понимаю, в цикле создаётся несколько полей datepicker c разными id. А при щелчке по .add-item добавляются новые поля в datepicker?
Да?
Если так, то у Вас не пересчитываются id для всех datepicker. Посмотрите в исходном коде, какие id и name создаются для динамически добавляемых datepicker.

[Дмитрий]

у меня одна форма и несколько блоков, которые содержат набор полей, в том числе и datepicker.

akula22, вернее изначально одна форма, которая содержит один блок с разными полями(имя, фамилия, адрес и поле для ввода даты). Id и name для этого набора содержит цифру "0"

<input id="dynamic-0-name" class="form-control" name="Dynamic[0][name]" type="text">
<input id="dynamic-0-surname" class="form-control" name="Dynamic[0][surname]" type="text">
<input id="dynamic-0-email" class="form-control" name="Dynamic[0][email]" type="email">
<input id="dynamic-0-date" name="Dynamic[0][date]" data-picker="datepicker" class="hasDatepicker" type="text">
Внизу формы две кнопки - "+" и "-".

Внизу формы две кнопки - "+" и "-".
При клике на "+" в форму добавляется ещё один блок из четырёх полей и пересчитывается значение id и name.
Получается, что у следующего блока у полей будут значения увеличенные на "1"

<input id="dynamic-1-name" class="form-control" name="Dynamic[1][name]" type="text">

И так будет пересчитываться для каждого блока.
Вот при таких условиях код работает.

[Дмитрий]

akula22, и ещё, я не использую yii2-dinamicform. Хотя Вы об этом изначально тоже не говорили.

[Дмитрий]

akula22, хотя, используете Вы виджет для динамических форм или нет - принцип всё тот же.

[Дмитрий]

akula22, как я и писал выше, для виджета от kartik чуть менять код надо. В виджете kartik\DatePicker нет функции datepicker(), зато есть kvDatepicker
Следовательно, код будет выглядеть следующим образом:

// удаляем принудительно виджеты
form.find('.krajee-datepicker').kvDatepicker('destroy')
// инициализируем принудительно виджеты
form.find('.krajee-datepicker').kvDatepicker()

[akula22]

slo_nik, завтра с новыми силами попробую, попробую dinamicform весь перелопатить, думаю там где-то касяк есть, ибо твой код срабатывает только если 2 раза нажать кнопку +, то есть только когда открываем третий объект, календарь начинает работать у второго инпута, но у третьего так же не работает, если нажать еще раз + то есть четвертый, начинает работать у третьего инпута

[akula22]

slo_nik, нет мыслей почему происходит так....
жму первый .addItem добавляется вторая дата, на первой работает на второй нет.
Жму второй раз .addItem добавляется третья дата, на первых двух работает на третьей нет и так далее.

вот исходники трех дат, который появляются после .add-item

<input type="text" id="ordertemplate-0-date" class="form-control krajee-datepicker" name="OrderTemplate[0][date]" placeholder="Enter estimated delivery ..." data-datepicker-source="ordertemplate-0-date-kvdate" data-datepicker-type="2" data-krajee-kvdatepicker="kvDatepicker_128182cb" aria-invalid="true">



<input type="text" id="ordertemplate-1-date" class="form-control krajee-datepicker" name="OrderTemplate[1][date]" placeholder="Enter estimated delivery ..." data-datepicker-source="ordertemplate-0-date-kvdate" data-datepicker-type="2" data-krajee-kvdatepicker="kvDatepicker_128182cb">



<input type="text" id="ordertemplate-2-date" class="form-control krajee-datepicker" name="OrderTemplate[2][date]" placeholder="Enter estimated delivery ..." data-datepicker-source="ordertemplate-0-date-kvdate" data-datepicker-type="2" data-krajee-kvdatepicker="kvDatepicker_128182cb">

[Дмитрий]

akula22, Вы используете ещё один виджет, для динамической формы. Возможно он и мешает. Или в Вашем js есть проблема.

[akula22]

slo_nik, пришлось залезть в код динамической формы в vendor, туда вставил твой код и заработало!
Сейчас думаю как отнаследовать этот код чтобы при апдейте не затерало.

[Дмитрий]

akula22, радикальнинько))) А Вы не думали вообще отказаться от виджета?

[Дмитрий]

akula22, у Вас нормально работают datepicker-ы? Тут опять на toster.ru похожий вопрос возник. Предложил такое же решение, как и Вам. Но оно не сработало. Почему, я не знаю. Вот поломал голову, порылся в инете и нашёл ещё один вариант.
Если у Вас не работает старое решение, то попробуйте так переопределять datepicker-ы

form.find(':input[data-picker=calendar]').removeClass('hasDatepicker');
   form.find(':input[data-picker=calendar]').not('.hasDatePicker').datepicker();

Отпишитесь, если не затруднит, какое, в конечном счёте, решение работает у Вас.

[akula22]

slo_nik, работает первый Ваш вариант

[Дмитрий]

akula22, а я, вчера, так и не смог запустить этот вариант.

[Дмитрий]

akula22, а на каком виджете Вы остановились? На yii\jui\DatePicker или от kartik datepicker?

[akula22]

на катрике, все работает

[Дмитрий]

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

Answer 2

[Dmitry Bay]

1) используйте разные идентификаторы (у вас они есть)
2) запускайте на каждый новый экземпляр дэйтпикер.

Comments

[akula22]

А можно пример?

[Dmitry Bay]

akula22, Посмотрите в конце страницы сгенерированной, там должен быть запуск виджета. Далее в момент подстановки дополнительной строки - запуски на ее ид плагин пикера.