Yii Framework – Membuat datepicker dengan CJuiDatePicker

Yii menyediakan widget untuk memudahkan kita menginput data tanggal. Widget ini adalah CJuiDatePicker. Untuk menggunakan widget ini, kita hanya perlu mengganti input textField tanggal dengan menggunakan kode widget ini.

Default

<div class="row">
    <?php echo $form->labelEx($model,'created_date'); ?>
    <?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
        'model' => $model,
        'attribute' => 'created_date'
    )); ?>
    <?php echo $form->error($model,'created_date'); ?>
</div>

Inline

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'created_date',
    'flat' => true
));

Input Bulan dan Tahun

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'created_date',
    'options' => array(
        'changeMonth' => true,
        'changeYear' => true
    )
));

Multiple Bulan

CJuiDatePicker menyediakan untuk view bulan lebih dari 1 bulan dengan menambahkan options numberOfMonths.

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'created_date',
    'options' => array(
        'numberOfMonths' => 3
    )
));

Format Tanggal

CJuiDatePicker memungkinkan kita untuk mengubah format tanggal sesuai dengan yang kita butuhkan, dengan menambahkan options dateFormat.

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'created_date',
    'options' => array(
        'dateFormat' => 'yy-mm-dd'
    )
));

Range Tanggal

Pada contoh ini input tanggal dibatasi dengen ketentuan.

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'created_date',
    'options'=>array(
        'minDate'=>-1,
        'maxDate'=>"+1W +5D",
    )
));

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S