我們的表單中經常需要用戶輸入時間,yii中有很方便的時間控件CJuiDatePicker可供使用,得到的效果如下:
調用方法
[php]
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
'language'=>'zh_cn',
'name'=>'worktime[start]',
'value'=>$query['start'] ? $query['start'] : Date('Y-m-d'),
'options'=>array(
'showAnim'=>'fold',
'showOn'=>'both',
'buttonImage'=>Yii::app()->request->baseUrl.'/images/calendar.gif',
'maxDate'=>'new Date()',
'buttonImageOnly'=>true,
'dateFormat'=>'yy-mm-dd',
),
'htmlOptions'=>array(
'style'=>'height:18px',
'maxlength'=>8,
),
));
?>
上述代碼得到的html代碼如下:
[html]
<input type="text" name="worktime[start]" value="2012-11-02" id="worktime_start" maxlength="8" style="height:18px" class="hasDatepicker">
<img class="ui-datepicker-trigger" src="/oss/images/calendar.gif" alt="..." title="...">
CJuiDatePicker中的參數說明
name:input標簽中的name
value: input標簽中的value
options:主要是日歷控件顯示相關的
showAnim:日歷框出現的動畫效果,可選值slideDown, show(the default), slideDown, fadeIn, fold 等
showOn:日歷框如何被觸發,both:點圖標和輸入框均可;focus:點輸入框;button:點圖標
buttonImage:圖標圖片地址
maxDate:可選的最大日期,對應的還有minData
dateFormat:日歷數據格式。注意,上面value的日期格式必須與此處一致,否則數據不會與控件匹配。
htmlOptions:input框的一些html設置,如樣式,最大長度等。
注:
更多其他參數,可以參考jquery datepicker手冊,然後將其放在上面的options裡,並用單引號引起來。