Does not work properly in dynamic forms

[M-Fares]

I don't know if should post this here or on dynamic form but I am posting anyway

I implemented it like this, the datepicker popup appears only for the first Item and not for the other dynamic items

خبرات العمل

```

'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_] 'widgetBody' => '.container-items', // required: css class selector 'widgetItem' => '.item', // required: css class 'limit' => 4, // the maximum times, an element can be cloned (default 999) 'min' => 1, // 0 or 1 (default 1) 'insertButton' => '.add-item', // css class 'deleteButton' => '.remove-item', // css class 'model' => $WorkExperiencesModels[0], 'formId' => 'dynamic-form', 'formFields' => [ 'Title', 'Description', 'FKWorkSectorID', 'FKCountryID', 'FKCityID', 'StartDate', 'EndDate', ], ]); ?>

$WorkExperiencesModel): ?>

خبرات العمل

isNewRecord) { echo Html::activeHiddenInput($WorkExperiencesModel, "[{$i}]ID"); } ?> field($WorkExperiencesModel, "[{$i}]Title")->textInput(['maxlength' => true]) ?>

field($WorkExperiencesModel, "[{$i}]Description")->textarea(['maxlength' => true]) ?>

field($WorkExperiencesModel, "[{$i}]FKWorkSectorID")->dropDownList( ArrayHelper::map(Worksector::find()->all(), 'ID', 'Name'), // Flat array ('id'=>'label') ['prompt'=>''] // options ) ?>

field($WorkExperiencesModel, "[{$i}]FKCountryID")->dropDownList( ArrayHelper::map(Countries::find()->all(), 'ID', 'Name'), // Flat array ('id'=>'label') ['prompt'=>'select country', // options 'onchange'=>' console.log("fired"); $.post("index.php?r=cities/list&id='.'"+$(this).val(),function(data){ $("[{$i}]select#workexperience-fkcityid").html(data); });' ]) ?>

field($WorkExperiencesModel, "[{$i}]FKCityID")->dropDownList( ArrayHelper::map(Cities::find()->all(), 'ID', 'Name'), // Flat array ('id'=>'label') ['prompt'=>''] // options ) ?>

field($WorkExperiencesModel, "[{$i}]StartDate")->widget( DatePicker::className(), [ // inline too, not bad // 'inline' => true, // modify template for custom rendering 'template' => '{addon}{input}', 'clientOptions' => [ 'autoclose' => true, 'format' => 'yyyy-mm-dd', 'startView'=>'year' ] ]);?>

field($WorkExperiencesModel, "[{$i}]EndDate")->widget( DatePicker::className(), [ // inline too, not bad // 'inline' => true, // modify template for custom rendering 'template' => '{addon}{input}', 'clientOptions' => [ 'autoclose' => true, 'format' => 'yyyy-mm-dd', 'startView'=>'year' ] ]);?>

```

[tonydspaniard]

Mind checking the resulting javascript?

[Flashwade1990]

You should add datepicker manually for dynamically genereted instances:

function multipleDatepickers()
{
    $(".dynamicform_wrapper").on("afterInsert afterDelete", function(e, item) {
        var VarItemsQuantity = $('.item').length,
            VarCounter = 1;
        for(VarCounter; VarCounter < VarItemsQuantity; VarCounter++) {
            $('#WorkExperiencesModel-' + VarCounter + '-StartDate').
                parent().datepicker({"autoclose":true,  "format":"dd-M-yyyy", 'language':'ru',});
            $('#WorkExperiencesModel-' + VarCounter + '-EndDate').
                parent().datepicker({"autoclose":true,  "format":"dd-M-yyyy", 'language':'ru',});
        };
    });
}

[DanLivassan]

@Flashwade1990 Solution works fine!

[jhonnyfcr]

Donde agrego la funcion?? unction multipleDatepickers() { $(".dynamicform_wrapper").on("afterInsert afterDelete", function(e, item) { var VarItemsQuantity = $('.item').length, VarCounter = 1; for(VarCounter; VarCounter < VarItemsQuantity; VarCounter++) { $('#WorkExperiencesModel-' + VarCounter + '-StartDate'). parent().datepicker({"autoclose":true, "format":"dd-M-yyyy", 'language':'ru',}); $('#WorkExperiencesModel-' + VarCounter + '-EndDate'). parent().datepicker({"autoclose":true, "format":"dd-M-yyyy", 'language':'ru',}); }; }); }

[tonydspaniard]

@jhonnyfcr use $this->registerJs and only:

$(".dynamicform_wrapper").on("afterInsert afterDelete", function(e, item) {
        var VarItemsQuantity = $('.item').length,
            VarCounter = 1;
        for(VarCounter; VarCounter < VarItemsQuantity; VarCounter++) {
            $('#WorkExperiencesModel-' + VarCounter + '-StartDate').
                parent().datepicker({"autoclose":true,  "format":"dd-M-yyyy", 'language':'ru',});
            $('#WorkExperiencesModel-' + VarCounter + '-EndDate').
                parent().datepicker({"autoclose":true,  "format":"dd-M-yyyy", 'language':'ru',});
        };
    });