Solutions for date picker does not work properly in dynamic forms
Date picker widget add in dynamic form of yii2.
Problem using your yii2 extension, especialy the bootstrap datepicker is not show up.
You should add datepicker manually for dynamically genereted instances:
Add code in register javascript
$(".dynamicform_wrapper2").on("afterInsert afterDelete", function(e, item) {
var VarItemsQuantity = $('.item2').length, VarCounter = 1;
for(VarCounter; VarCounter < VarItemsQuantity; VarCounter++) {
$('#dailyaccountbank-'+VarCounter+'-date').
parent().datepicker({"autoclose":true, "format":"d-m-yyyy", 'language':'ru',});
};
View form like this
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use wbraganca\dynamicform\DynamicFormWidget;
use yii\helpers\ArrayHelper;
use dosamigos\datepicker\DatePicker;
/* @var $this yii\web\View */
/* @var $model backend\modules\master\models\Students */
$this->title = 'Daily Account From';
//$this->params['breadcrumbs'][] = ['label' => 'Daily', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<?php
$script = <<< JS
$(".dynamicform_wrapper").on("afterInsert afterDelete", function(e, item) {
var VarItemsQuantity = $('.item').length, VarCounter = 1;
for(VarCounter; VarCounter < VarItemsQuantity; VarCounter++) {
$('#dailyaccountbank-'+VarCounter+'-date').
parent().datepicker({"autoclose":true, "format":"d-m-yyyy", 'language':'ru',});
};
});
JS;
$this->registerJs($script);
?>
<div class="students-create">
<?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>
<!--Bank details-->
<div class="lb-box-header lb-with-border">
<h4 class="lb-box-title"><span class="glyphicon glyphicon-list-alt"></span> BANK REMITANCE DETAILS </h4>
</div>
<div class="row">
<div class="panel-body">
<?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' => 1, // 0 or 1 (default 1)
'insertButton' => '.add-item', // css class
'deleteButton' => '.remove-item', // css class
'model' => $modelsDailyaccountbank[0],
'formId' => 'dynamic-form',
'formFields' => [
'date',
'particulars',
'individual',
'mode',
'amount',
],
]); ?>
<table width = "100%">
<tr bgcolor="#ddd"><td width="15%"><b><center>DATE</center></b></td><td><b><center>PARTICULARS</center></b></td><td><b><center>INDIVIDUAL/COMPANY</center></b></td><td width="10%"><b><center>MODE</center></b></td><td width="10%"><b><center>AMOUNT</center></b></td><td width="6%"><b><center>Action</center></b></td></tr>
</table>
<div class="container-items"><!-- widgetContainer -->
<?php foreach ($modelsDailyaccountbank as $i => $modelDailyaccountfee): ?>
<div class="item"><!-- widgetBody -->
<table width = "100%">
<tr>
<td width="15%">
<?= $form->field($modelDailyaccountfee, "[{$i}]date") //->textInput(['maxlength' => true])->label(false)
->widget(
DatePicker::className(), [
// inline too, not bad
'inline' => FALSE,
// modify template for custom rendering
//'template' => '<div class="well well-sm" style="background-color: #fff; width:250px">{input}</div>',
'clientOptions' => [
'autoclose' => true,
'format' => 'd-m-yyyy',
'todayHighlight' => true
//'startDate' => $model->edate,
]
])->label(FALSE);
?>
</td>
<td>
<?= $form->field($modelDailyaccountfee, "[{$i}]particulars")->textInput(['maxlength' => true])->label(false) ?>
</td>
<td>
<?= $form->field($modelDailyaccountfee, "[{$i}]individual")->textInput(['maxlength' => true])->label(false) ?>
</td>
<td width="10%">
<?= $form->field($modelDailyaccountfee, "[{$i}]mode")->textInput(['maxlength' => true])->label(false) ?>
</td>
<td width="10%">
<?= $form->field($modelDailyaccountfee, "[{$i}]amount")->textInput(['maxlength' => true , 'style'=>'text-align:right'])->label(false) ?>
</td>
<td width="6%">
<button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
</td>
</tr>
</table>
</div>
<?php endforeach; ?>
</div>
<?php DynamicFormWidget::end(); ?>
</div>
</div>
<!-- <div class="form-group">
<= Html::submitButton('Create', ['class' => 'btn btn-success']) ?>
</div>-->
<br>
<div class="form-group col-xs-12 col-sm-6 col-lg-4 no-padding">
<div class="col-xs-6">
<?= Html::submitButton('<i class="fa fa-print"></i> Print', ['class' => 'btn btn-block btn-success','formtarget'=>"_blank"]) ?>
</div>
<div class="col-xs-6">
<?= Html::resetButton('Reset', ['class' => 'btn btn-default btn-block']) ?>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>
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',});
};
});
}
Related Links
Dynamic Forms in Yii2 Operations
Yii Tabular Input
No comments:
Post a Comment