Как сделать несколько datepicker в yii2?

Question

[Konstantin Zhikhor]

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

код форм

<div class="ag_1_1">
	    <div class="ag_3">План достижения цели</div>
			<div class="stage">
			<div class="ag_1_2"><?= $form->field($stage, '[]title')->textInput(['class'=>'input_goal','placeholder'=>'Название этапа'])->label(false) ?></div>
			
			<div class="ag_1_2"><?= $form->field($stage, '[]description')->textarea(['class'=>'input_goal','placeholder'=>'Описание этапа'])->label(false) ?></div>
		    <ul class="ag_8">
			    <li class="ag_l"><img src="img/icon/leveldown.svg" alt=""/></li>
			    <li class="ag_ac"><?= $form->field($stage, '[]date_finish_stage')->widget(BootstrapDatepicker::className(['type'=>BootstrapDatepicker::TYPE_RANGE]))->label() ?></li>
		    </ul>
		            
		    </div>
		    <div class="ag_2_1" onclick="$('.ag_1_1').find('.stage').append($('.stage').html());">Добавить этап</div>
	    </div>

Answer 1

[Дмитрий]

Добрый вечер.
Вам надо при каждом добавлении DatePicker заново инициализировать календари.
Как-то так:

// сначала удаляем все datepicker
form.find('.hasDatepicker').datepicker('destroy');
// затем заново всё инициализируем
$('#testForm').find('input[data-picker=datepicker]').datepicker()

Пример показал для встроенного в yii2 datepicker, но у Вас аналогичное решение.

Comments

[Konstantin Zhikhor]

Я так пробовал делать.
Ещё раз попробую.
А какой элемент должен быть где написано #testForm ?

[Дмитрий]

shevchenko__k, '#testForm' - id Вашей формы

[Дмитрий]

shevchenko__k, какой именно datepicker Вы используете?

[Konstantin Zhikhor]

slo_nik, BootstrapDatepicker
вот ссылка https://libraries.io/packagist/phpnt%2Fyii2-datepicker

[Дмитрий]

shevchenko__k, а как насчёт встроенного DatePicker? Чем он Вас не устраивает?

[Konstantin Zhikhor]

Хорошо. Я попробую. Спасибо за подсказку.

[Дмитрий]

shevchenko__k, да вроде и для этого должно так сработать. Надо проверять.
Добавьте к своему datepicker класс и по нему уже ориентируйтесь.
Что-то похожее должно быть.

$('.you_class_for_datepicker').datepicker('destroy')
$('.you_class_for_datepicker').datepicker()

[Konstantin Zhikhor]

slo_nik, я написал js код

$('.ag_2_1').on('click', function(){
	form.find('.hasDatepicker').datepicker('destroy');
	form.find('input[data-picker=datepicker]').datepicker()
})

он все равно не работает.
подскажите мне кодом. как еще можно сделать. я уже весь интернет перерыл. ничего не помогает

[Дмитрий]

shevchenko__k, этот код рабочий. Я Вам дал его с рабочего проекта. Но, повторю, он для встроенного в yii datepicker. Для того, что Вы используете, он тоже, возможно, подойдёт. Смотрите в исходном коде виджета, какие функции вызывают и удаляют datepicker.

[Дмитрий]

shevchenko__k, покажите полностью свой js и вывод формы. На использовании какого виджета Вы остановились?

[Konstantin Zhikhor]

slo_nik, я начал использовать родной yii datepicker и мне фрейм вывел что он такого виджета не знает.
вот виджет который я потом загрузил yii\jui\DatePicker.
js код

$('.ag_2_1').on('click', function(){
	form.find('.hasDatepicker').datepicker('destroy');
	form.find('input[data-picker=datepicker]').datepicker()
})

форма вот

<div class="ag_1_1">
	    <div class="ag_3">План достижения цели</div>
			<div class="stage">
			<div class="ag_1_2"><?= $form->field($stage, '[]title')->textInput(['class'=>'input_goal','placeholder'=>'Название этапа'])->label(false) ?></div>
			
			<div class="ag_1_2"><?= $form->field($stage, '[]description')->textarea(['class'=>'input_goal','placeholder'=>'Описание этапа'])->label(false) ?></div>
		    <ul class="ag_8">
			    <li class="ag_l"><img src="img/icon/leveldown.svg" alt=""/></li>
			    <li class="ag_ac"><?= $form->field($stage, '[]date_finish_stage')->widget(\yii\jui\DatePicker::className(),['options' => ['data' => ['picker' => 'datepicker']]])->label(false) ?></li>
		    </ul>
		            
		    </div>
		    <div class="ag_2_1" onclick="$('.ag_1_1').find('.stage').append($('.stage').html());">Добавить этап</div>
	    </div>

извините. может вопрос мой тупой и слишком легкий но я по пустякам не обращаюсь за помощью. я обращаюсь когда я действительно не пойму как делать.

[Дмитрий]

shevchenko__k, во-первых, он у Вас и не будет работать. Загляните в консоль браузера и посмотрите, что там Вам js отвечает.

[Konstantin Zhikhor]

slo_nik, я написал такой код

$('.ag_2_1').on('click', function(){
		$('#form').find('.hasDatepicker').datepicker('destroy');
		$('#form').find('input[data-picker=datepicker]').datepicker()
	})

а он мне выдает ошибку
Cannot read property 'append' of undefined
вот это я не пойму почему

[Konstantin Zhikhor]

slo_nik, можешь все таки подсказать. У меня не получается.

[Дмитрий]

shevchenko__k, да вот думаю, чем помочь.
Вот это

$('.ag_1_1').find('.stage').append($('.stage').html());

я бы убрал, а записал бы в js файл.

[Konstantin Zhikhor]

slo_nik, изините, я написал так в js файл

$('.ag_2_1').on('click', function(){
		$('.ag_1_1').find('.stage').append($('.stage').html());
		$('#form').find('.hasDatepicker').datepicker('destroy');
		$('#form').find('input[data-picker=datepicker]').datepicker();
	})

он мне все равну туже ошибку пишет. я уже понял что проблема в строке
$('.ag_1_1').find('.stage').append($('.stage').html());

[Дмитрий]

shevchenko__k, сначала надо подготовить данные, а потом уже подставлять куда-либо. И для подобной операции используют clone()

[Дмитрий]

shevchenko__k, ха!!! Вроде дотямал, как сделать))) Протестирую и Вам отпишусь.
Хотя чуть странно мне это всё.

[Дмитрий]

shevchenko__k, ну вот вроде заработало.
Попробуйте вот так сделать.

$('.ag_2_1').on('click', function(){
    // сначала клонируете input-ы, пересчитываете индексы, а потом уже это запустить пробуете.
    form.find(':input[data-picker=datepicker]').removeClass('hasDatepicker');
    form.find(':input[data-picker=datepicker]').not('.hasDatePicker').datepicker();
}

[Konstantin Zhikhor]

slo_nik, а что значит пересчитать индекс ? id прибавить на 1 ?

[Konstantin Zhikhor]

slo_nik, объясни пожалуйста, что значит пересчитать индекс ? И вообще как посоветуешь сделать такую штуку. Мне надо при нажатии на кнопку копировать формочку этапа.

[Дмитрий]

shevchenko__k, используйте clone(). Для каждого набора значения увеличиваете на 1. Для label, id, name.

[Konstantin Zhikhor]

slo_nik, извините но у меня не работает код.

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

вы дает ошибку
form.find is not a function
помогите пожалуйста
и как увеличить значение на 1 ?
подскажи пожалуйста