Pada bagian ini kita akan menginstall tools dari vendor untuk membuat datepicker. Tools tersebut adalah Yii2 Datepicker widget yang disediakan oleh vendor 2amigos.
1. Install Yii2 datepicker widget dari 2amigos melalui composer :
|
1 |
sudo php composer.phar require 2amigos/yii2-date-picker-widget:~1.0 |
Apabila sobat belum memiliki composer, install dahulu composer di directory advanced melalui perintah berikut :
|
1 |
curl -sS https://getcomposer.org/installer | php |
2. Tambahkan kolom company_create_date pada tabel companies.
3. Apabila yii2-date-picker-widget sudah berhasil terinstall, maka akan muncul folder 2amigos.
Modifikasi file _form.php yang berada di folder /backend/modules/settings/views/companies dan tambahkan
|
1 |
use dosamigos\datepicker\DatePicker; |
dan copy paste perintah penggunaan DatePicker yang ada di website 2amigos :
|
1 2 3 4 5 6 7 8 9 10 11 |
<?= $form->field($model, 'date')->widget( DatePicker::className(), [ // inline too, not bad 'inline' => true, // modify template for custom rendering 'template' => '<div class="well well-sm" style="background-color: #fff; width:250px">{input}</div>', 'clientOptions' => [ 'autoclose' => true, 'format' => 'dd-M-yyyy' ] ]);?> |
Dan lakukan modifikasi pada ‘date’ menjadi ‘company_start_date’ , comment baris template, format tanggal, dan false pada inline, sehingga _form.php menjadi seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?php use yii\helpers\Html; use yii\widgets\ActiveForm; use dosamigos\datepicker\DatePicker; /* @var $this yii\web\View */ /* @var $model backend\modules\settings\models\Companies */ /* @var $form yii\widgets\ActiveForm */ ?> <div class="companies-form"> <?php $form = ActiveForm::begin(); ?> <?= $form->field($model, 'company_name')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'company_email')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'company_address')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'company_start_date')->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' => 'yyyy-m-d' ] ]);?> <?= $form->field($model, 'company_created_date')->textInput() ?> <?= $form->field($model, 'company_status')->dropDownList([ 'inactive' => 'Inactive', 'active' => 'Active', ], ['prompt' => '']) ?> <?= $form->field($model, 'logo')->textInput(['maxlength' => true]) ?> <div class="form-group"> <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?> </div> <?php ActiveForm::end(); ?> </div> |
Dan tampilan form akan seperti ini :
Tutorial ini sebagai dokumentasi dan pembelajaran pribadi sekalian belajar terjemahin bahasa Inggris, dan siapa tahu bermanfaat buat orang lain. Sumber lengkapnya diambil dari Youtube DoingITEasy Channel.