Date Picker Widget Yii2

Ternyata yang di tips & trik memasang widget kemarin itu date time picker. Dan penggunaannya cukup merepotkan kalau yang dibutuhkan cuma tanggalnya saja. Jadi, kali ini kita akan memasang date picker pada form dan juga menggunakan date picker tersebut pada gridview.
Seperti biasa, pertama buka terminal dan buka direktori projek kita. Pastikan sudah menginstall composer. Jika belum, masukkan perintah:

curl -sS https://getcomposer.org/installer | php

Setelah itu install date picker widget dengan memasukkan perintah:

php composer.phar require "2amigos/yii2-date-picker-widget" "*"

Contohnya kita memiliki database seperti berikut:

Kemudian kita membuat Model dan CRUD menggunakan GII. Namun, pada form, inputan untuk tanggal berbentuk teks seperti biasa.

Jadi, kita buka file _form.php dan kita ubah script:

<?= $form->field($model, 'tanggal')->textInput() ?>

menjadi:

    <?= $form->field($model, 'tanggal')->widget(
        DatePicker::className(),[
            'inline' => true,
            'template' => '<div class="well well-sm" style="background-color:#fff;width:250px">{input}</div>',
            'clientOptions' => [
                'autoclose' => true,
                'format' => 'yyyy-m-d'
            ]
        ]
    ) ?>

Jangan lupa, dibawah script

use yii\helpers\Html;
use yii\widgets\ActiveForm;

harus kita isi dengan use dosamigos\datepicker\DatePicker;  sehingga nanti akan menjadi seperti ini:

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use dosamigos\datepicker\DatePicker;

Penjelasan:

use dosamigos\datepicker\DatePicker; kita tambahkan karena kita memang menggunakan datepicker. Singkatnya, perintah tersebut gunanya

Hasilnya nanti akan seperti ini:

Jika kita ingin datepicker yang lebih standar, cukup ubah 'inline'=>true, menjadi 'inline'=>false, dan hapus templatenya sehingga menjadi

    <?= $form->field($model, 'tanggal')->widget(ba
        DatePicker::className(),[
            'inline' => false,
            'clientOptions' => [
                'autoclose' => true,
                'format' => 'yyyy-m-d'
            ]
        ]
    ) ?>

Hasilnya nanti seperti ini:

Baiklah, silahkan lihat kelanjutannya tentang pencarian pada gridview dengan datepicker untuk pencarian berdasarkan tanggal di sini.
Jika ada yang kurang dipahami, silahkan bertanya.