Yii Framework CJuiDatePicker 日期選擇器元件完整教學與表單整合

CJuiDatePicker 封裝 jQuery UI Datepicker，提供直觀日期選取介面，支援按鈕觸發、圖示、動畫、多語言與日期範圍限制。

基本用法（按鈕觸發模式）

<?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'name' => 'my_date',
    'language' => 'zh-TW',  // 語言包需對應 jquery.ui.datepicker-zh-TW.js
    'options' => array(
        'showAnim' => 'fold',           // 動畫：show/slideDown/fadeIn/fold
        'showOn' => 'button',           // 觸發方式：focus/button/both
        'buttonText' => '選擇日期',
        'buttonImage' => '/images/calendar.png',
        'buttonImageOnly' => true,      // 僅顯示圖示
        'dateFormat' => 'yy-mm-dd',     // 日期格式
        'changeMonth' => true,          // 可選月份
        'changeYear' => true,           // 可選年份
        'yearRange' => '1950:2050',     // 年份範圍
    ),
    'htmlOptions' => array(
        'style' => 'width:80px;vertical-align:top',
        'placeholder' => 'YYYY-MM-DD',
    ),
)); ?>

表單模型綁定與後端接收

// Model
class DataModel extends CFormModel {
    public $my_date;
    public function rules() {
        return array(
            array('my_date', 'date', 'format' => 'yyyy-MM-dd'),
        );
    }
}

// Controller
public function actionIndex() {
    $model = new DataModel();
    if (isset($_POST['DataModel'])) {
        $model->attributes = $_POST['DataModel'];
        if ($model->validate()) {
            $this->render('result', array('model' => $model));
            return;
        }
    }
    $this->render('index', array('model' => $model));
}

進階：日期範圍選擇（開始/結束）

<?php
$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'name' => 'date_from',
    'options' => array(
        'onClose' => 'js:function(selectedDate) {
            $("#date_to").datepicker("option", "minDate", selectedDate);
        }',
    ),
));
$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'name' => 'date_to',
    'options' => array(
        'onClose' => 'js:function(selectedDate) {
            $("#date_from").datepicker("option", "maxDate", selectedDate);
        }',
    ),
));
?>

語言包設定

1. 下載 jquery.ui.datepicker-zh-TW.js（或 zh-CN）
2. 放入專案 js/ 目錄
3. 視圖中註冊：Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/js/jquery.ui.datepicker-zh-TW.js', CClientScript::POS_HEAD);
4. Widget 設定 'language' => 'zh-TW'

常見問題

• 日期格式不符：確認 dateFormat 與模型驗證 format 一致
• 無法選擇年份：需設定 changeYear: true 並給 yearRange
• 按鈕圖示不顯示：檢查 buttonImage 路徑、CSS background-image 衝突
• Z-index 被遮擋：'htmlOptions'=>array('style'=>'z-index:9999;') 或調整容器定位