Dalam membuat aplikasi kita tentu ingin membuat pengguna aplikasi kita merasa nyaman  menggunakan aplikasi yang kita kembangkan. Komponen penting berkaitan dengan kenyamanan adalah tampilan aplikasi kita. Tentu tampilan aplikasi kita harus dapat mengarahkan pengguna atau mengarahkan user untuk mengetahui konsep dari aplikasi kita dan juga cara menggunakannya.

Salah satu aspek penting dalam kenyamanan tampilan adalah konsistensi interface atau konsistensi tampilan layar dari aplikasi yang telah kita kembangkan. Dalam mengembangkan aplikasi berbasis web kita dapat menggunakan Yii dan untuk tampilan kita dapat menggunakan Bootstrap.

Kali ini kita akan membahas bagaimana menerapkan style Bootsrap ke dalam tampilan memasukkan tanggal pada aplikasi kita yang dikembangkan menggunakan framework Yii. Dalam framework Yii ini kita akan menggunakan pustaka CJuiDatePicker.

Contoh source code untuk CJuiDatePicker  adalah seperti berikut ini:

$this->widget(‘zii.widgets.jui.CJuiDatePicker’, array(
            ‘name’=>’date_start’,
            ‘value’=>$date_start,
            ‘options’=>array(
                ‘showAnim’=>’fold’,
                ‘dateFormat’=>’yy-mm-dd’,
                 ‘changeMonth’=> ‘true’,
                ‘changeYear’=> ‘true’,
            ),
        ));

Kemudian untuk menerapkan class pada CJuiDatePicker kita dapat menggunakan javascript seperti berikut ini

$(“#date_start”).addClass(“form-control”);

Dengan cara ini maka tampilan input tanggal akan memiliki gaya atau style seperti form-form yang lain.

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Seting class pada CJuiDatePicker Yii