2amigos/yii2-date-picker-widget not work (not show)

[andhikayuana]

Hello, im Andhika from Indonesia,

I have some problem using your yii2 extension, especialy the bootstrap datepicker is not show up. this is my form looks :

when i clicked the date input on red area, is not show up the bootstrap im using 2amigos/yii2-date-picker-widget

on the console not showing error

this is the expectation :

view

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use wbraganca\dynamicform\DynamicFormWidget;
use kartik\select2\Select2;
use app\models\RuangModel;
use app\models\InfectionModel;
use dosamigos\datepicker\DatePicker;

$js = '
jQuery(".dynamicform_wrapper").on("afterInsert", function(e, item) {
    jQuery(".dynamicform_wrapper .panel-title-address").each(function(index) {
        jQuery(this).html(index + 1)
    });
});

jQuery(".dynamicform_wrapper").on("afterDelete", function(e) {
    jQuery(".dynamicform_wrapper .panel-title-address").each(function(index) {
        jQuery(this).html(index + 1)
    });
});
';

$this->registerJs($js);
?>

<div class="infeksi-form">

    <?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>

    <div class="panel panel-default">
        <div class="panel-heading"> <i class="fa fa-user-plus"></i>&nbsp;Data Pasien</div>
        <div class="panel-body">

            <div class="row">
                <div class="col-md-4">
                    <?= $form->field($modelPasien, 'pasien_nrm')->textInput(['maxlength' => true]) ?>
                </div>
                <div class="col-md-4">
                    <?= $form->field($modelPasien, 'pasien_name')->textInput(['maxlength' => true]) ?>
                </div>
                <div class="col-md-4">
                    <?= $form->field($modelPasien, 'ruang_id')->widget(Select2::className(),[
                            'data' => RuangModel::getRuangList(),
                            'options' => ['placeholder' => 'Pilih ruang...'],
                            'pluginOptions' => ['allowClear'=>true]
                        ]) ?>
                </div>
            </div>

        </div>
    </div>

    <div class="padding-v-md">
        <div class="line line-dashed"></div>
    </div>
    <?php DynamicFormWidget::begin([
        'widgetContainer' => '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' => 0, // 0 or 1 (default 1)
        'insertButton' => '.add-item', // css class
        'deleteButton' => '.remove-item', // css class
        'model' => $modelInfection[0],
        'formId' => 'dynamic-form',
        'formFields' => [
            'full_name',
            'address_line1',
            'address_line2',
            'city',
            'state',
            'postal_code',
        ],
    ]); ?>
    <div class="panel panel-default">
        <div class="panel-heading">
            <i class="fa fa-list"></i>&nbsp; Jenis Infeksi
        </div>
        <div class="panel-body container-items"><!-- widgetContainer -->
            <?php foreach ($modelInfection as $index => $jenisInfeksi): ?>
                <div class="item panel panel-default">
                    <div class="panel-heading">
                        <span class="panel-title-address"><?= ($index + 1) ?></span>
                        <?= Html::button(Html::tag('i','',['class'=>'fa fa-minus']), ['class' => 'pull-right remove-item btn btn-danger btn-xs']); ?>
                        <div class="clearfix"></div>
                    </div>
                    <div class="panel-body">
                        <?php
                            // necessary for update action.
                            if (!$jenisInfeksi->isNewRecord) {
                                echo Html::activeHiddenInput($jenisInfeksi, "[{$index}]pasien_id");
                            }
                        ?>
                        <div class="row">
                            <div class="col-md-3">
                                <?= $form->field($jenisInfeksi, "[{$index}]infeksi_jenis")
                                        ->dropDownList(InfectionModel::getInfectionTypeList(), [
                                        'prompt' => 'Pilih Jenis'
                                    ]); ?>
                            </div>
                            <div class="col-sm-3">

                            <?= $form->field($jenisInfeksi, "[{$index}]infeksi_tgl_pasang")
                                    ->widget(DatePicker::className(),
                                    ['language'=> 'id',
                                    'clientOptions'=> [
                                        'autoclose'=>true,
                                        'format'=>'yyyy-mm-dd'
                                        ]
                                    ]) ?>
                                <?php /* $form->field($jenisInfeksi, "[{$index}]infeksi_tgl_pasang")->textInput(['maxlength' => true]) */?>
                            </div>
                            <div class="col-md-3">
                                <?= $form->field($jenisInfeksi, "[{$index}]infeksi_tgl_lepas")->textInput(['maxlength' => true]) ?>
                            </div>
                            <div class="col-md-3">
                                <?= $form->field($jenisInfeksi, "[{$index}]infeksi_tgl_infeksi")->textInput(['maxlength' => true]) ?>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        <div class="panel-footer">
            <?= Html::button(Html::tag('i','',['class'=>'fa fa-plus']).' Jenis Infeksi', [
                'class' => 'pull-right add-item btn btn-success btn-sm'
            ]); ?>
            <div class="clearfix"></div>
        </div>
    </div>
    <?php DynamicFormWidget::end(); ?>

    <div class="form-group">
        <?= Html::submitButton($jenisInfeksi->isNewRecord ? 
            '<i class="fa fa-floppy-o"></i> Simpan' : '<i class="fa fa-pencil-square-o"></i> Update', [
            'class' => $jenisInfeksi->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

[salman67]

Hey have you found any solution to this? Even im facing the same problem..

[karmrajzala]

@andhikayuana : I need to add datepicker jquery dynamically after insert the form content. I had also datepicker issue in DynamicFormWidget. You can datepicker jquery dynamically at following way :

jQuery(".dynamicform_wrapper").on("afterInsert", function(e, item) { jQuery(".dynamicform_wrapper .panel-title-address").each(function(index) { jQuery(this).html("Installment: " + (index + 1)) $("#date-"+index+"-attribute").datepicker(); }); });

[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',}); }; }); }

https://github.com/2amigos/yii2-date-picker-widget/issues/11

[salman67]

Please see this issue.. Default value don't work in kartik datapicker dymanic form

[andhikayuana]

Thanks

[argyll231]

Hi Andhika

Did you manage to get this sorted out?

I am having a similar issue and all of the solutions I have found are for when there is a minimum of 1 dynamic forms. My software, like yours is for zero or more dynamic forms.

Thank you

Tony