Yii中使用datepicker的几种方式

作者：zccst

一，前端展示
例1，最简单好用的方式。简单在于不需要$model

<?php 
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
	'attribute'=>'visit_time',
	'language'=>'zh_cn',
	'name'=>'visit_time',
	'options'=>array(
		'showAnim'=>'fold',
		'showOn'=>'both',
		'buttonImage'=>Yii::app()->request->baseUrl.'/images/calendar.gif',
		'buttonImageOnly'=>true,
		'minDate'=>'new Date()',
		'dateFormat'=>'yy-mm-dd',
	),
	'htmlOptions'=>array(
		'style'=>'height:18px',
	),
));
?>

例2：

<?php 
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
	'attribute'=>'visit_time',
	'language'=>'zh_cn',
	'model'=>$repairInfo,
	'name'=>$repairInfo->visit_time,
	'options'=>array(
		'showAnim'=>'fold',
		'showOn'=>'both',
		'buttonImage'=>Yii::app()->request->baseUrl.'/images/calendar.gif',
		'buttonImageOnly'=>true,
		'minDate'=>'new Date()',
		'dateFormat'=>'yy-mm-dd',
	),
	'htmlOptions'=>array(
		'style'=>'height:18px',
	),
));
?>

例3：

<div class="row">
<?php echo $form->labelEx($model,'time'); ?>
<?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
'model'=>$model,
'attribute'=>'time',
'options'=>array(
    //'showAnim'=>'slideDown', // 'show' (the default), 'slideDown', 'fadeIn', 'fold'
    'showOn'=>'button', // 'focus', 'button', 'both'
    'buttonImage'=>Yii::app()->request->baseUrl.'/images/calendar.png',
    'buttonImageOnly'=>true,
    'htmlOptions'=>array('readonly'=>"readonly"),
    'changeMonth'=>true,
    'changeYear'=>true,
    'mode'=>'datetime',
    'dateFormat'=>'dd/mm/yy',
'htmlOptions'=>array(
    'size'=>43,
    'value'=>(!empty($model->time))?(is_numeric($model->time))?date('d/m/Y',$model->time):$model->time:date('d/m/Y')),

)));?>
<?php echo $form->error($model,'time'); ?>
</div>

其他参数，可以参考jquery datepicker手册，然后将其放在上面的options里，并用单引号引起来。
http://jqueryui.com/demos/datepicker/

如设置最小日期为当前日期：'minDate'=>'new Date()',


二，后端获取
可以通过上面$model来获取，对应数据库中的一个表。
也可以使用js通过普通的方式获取其值。上面的日历，最终会生成一个input表单，用firebug查看其id，然后再获取该id的值，即可获取选择的日期。再通过get/post/ajax方式发送到后端。

如果您觉得本文的内容对您的学习有所帮助，您可以微信：

评论

3 楼 liwei3324 2015-05-23  

专门登录上来，感谢一下楼主的无私分享。帮助我解决问题了。

2 楼 zccst 2013-06-02  

sunlikes 写道

好像只能显示年月日，显示不了时分秒...求大师请教！

刚查了一下，官方版本确实没有时分秒，但是有人根据datepicker写了插件，详细可以参考：
http://trentrichardson.com/examples/timepicker/

1 楼 sunlikes 2013-05-31  

好像只能显示年月日，显示不了时分秒...求大师请教！