Yii内置扩展(zii)中具有方便的时间控件CJuiDatePicker可供使用。使用这个部件,你可以在视图里面插入以下代码:
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker', array(
'language'=>'zh_cn',
'name'=>'EndDate',
// additional javascript options for the date picker plugin
'attribute'=>'end_time',
'options'=>array(
'showAnim'=>'fold',
'dateFormat'=>'yy-mm-dd' //database save format
),
'htmlOptions'=>array(
'style'=>'height:20px;'
),
));?>
value: input标签中的value
language: 要使用的日期选择器的语言区域设置ID(如‘法语’,‘德语’)。 如果未设置此属性,日期选择器将显示为英文。
options:主要是日历控件显示相关的
showAnim:日历框出现的动画效果,可选值slideDown, show(the default), slideDown, fadeIn, fold 等
showOn:日历框如何被触发,both:点图标和输入框均可;focus:点输入框;button:点图标
buttonImage:图标图片地址
maxDate:可选的最大日期,对应的还有minData
dateFormat:日历数据格式。注意,上面value的日期格式必须与此处一致,否则数据不会与控件匹配。
htmlOptions:input框的一些html设置,如样式,最大长度等。
(更多其他参数,可以参考jquery datepicker手册)
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker', array(
'language'=>'zh_cn',
'name'=>'EndDate',
// additional javascript options for the date picker plugin
'attribute'=>'end_time',
'options'=>array(
'showAnim'=>'fold',
'dateFormat'=>'yy-mm-dd' //database save format
),
'htmlOptions'=>array(
'style'=>'height:20px;'
),
));?>
转换得到的HTML代码如下:
<input style="height:20px;" id="EndDate" type="text" name="EndDate" />
效果如下:
我们再来看看CJuiDatePicker中的一些参数说明:
name:input标签中的namevalue: input标签中的value
language: 要使用的日期选择器的语言区域设置ID(如‘法语’,‘德语’)。 如果未设置此属性,日期选择器将显示为英文。
options:主要是日历控件显示相关的
showAnim:日历框出现的动画效果,可选值slideDown, show(the default), slideDown, fadeIn, fold 等
showOn:日历框如何被触发,both:点图标和输入框均可;focus:点输入框;button:点图标
buttonImage:图标图片地址
maxDate:可选的最大日期,对应的还有minData
dateFormat:日历数据格式。注意,上面value的日期格式必须与此处一致,否则数据不会与控件匹配。
htmlOptions:input框的一些html设置,如样式,最大长度等。
(更多其他参数,可以参考jquery datepicker手册)