Yii Framework 开发教程(36) Zii组件-DatePicker示例

末蓝、 2023-10-16 19:21 13阅读 0赞

CJuiDatePicker 用于日期输入，它封装了 [JUI datepicker][]插件，其基本用法如下：

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <?php echo $form\->errorSummary($model); ?>
2.  
3.  <?php
4.  $this\->widget('zii.widgets.jui.CJuiDatePicker', array(
5.  'name'=>'my\_date',
6.  'language'=>'en',
7.  'options'=>array(
8.  // 'show' (the default), 'slideDown', 'fadeIn', 'fold'
9.  'showAnim'=>'fold',
10. 'showOn'=>'button', // 'focus', 'button', 'both'
11. 'buttonText'=>'Select form calendar',
12. 'buttonImage'=>'images/calendar.png',
13. 'buttonImageOnly'=>true,
14. ),
15. 'htmlOptions'=>array(
16. 'style'=>'width:80px;vertical-align:top'
17. ),
18. ));
19. 
20. ?>
21. <div class="row submit">
22. <?php echo CHtml::submitButton('Submit'); ?>
23. </div>
24. 
25. <?php $this\->endWidget(); ?>
26. </div>

<?php echo $form->errorSummary($model); ?>
    
     <?php
     $this->widget('zii.widgets.jui.CJuiDatePicker', array(
     	'name'=>'my_date',
     	'language'=>'en',
     	'options'=>array(
    	            // 'show' (the default), 'slideDown', 'fadeIn', 'fold'
     				'showAnim'=>'fold',
     				'showOn'=>'button', // 'focus', 'button', 'both'
     				'buttonText'=>'Select form calendar',
     				'buttonImage'=>'images/calendar.png',
     				'buttonImageOnly'=>true,
     				),
     			'htmlOptions'=>array(
     				'style'=>'width:80px;vertical-align:top'
     				),
     			));
    
     ?>
    <div class="row submit">
        <?php echo CHtml::submitButton('Submit'); ?>
    </div>
    
    <?php $this->endWidget(); ?>
    </div>

为了获取输入的日期，首先为CJuiDatePicker的Name属性赋值，本例为my\_date，然后定义DataModel

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  class DataModel extends CFormModel
2.  \{
3.  public $my\_date;
4.  \}

class DataModel extends CFormModel
    {
    	public $my_date;
    }

当用户提交时，显示用户输入的日期，修改SiteController的actionIndex

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  public function actionIndex()
2.  \{
3.  
4.  $model=new DataModel();
5.  
6.  if(!empty($\_POST\['my\_date'\]))
7.  \{
8.  $model\->my\_date=$\_POST\['my\_date'\];
9.  
10. if($model\->validate()) \{
11. $this\->render('result', array(
12. 'model' => $model,
13. 
14. ));
15. return;
16. \}
17. 
18. \}
19. 
20. $this\->render('index', array(
21. 'model' => $model,
22. 
23. ));
24. \}

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

[![201212129005][]  
][201212129005_] 本例 [下载][Link 1]

[JUI datepicker]: http://jqueryui.com/demos/datepicker/
[view plain]: http://blog.csdn.net/mapdigit/article/details/8456769#
[201212129005]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2012/12/201212129005.png
[201212129005_]: http://www.imobilebbs.com/wordpress/archives/4104/attachment/201212129005
[Link 1]: http://www.imobilebbs.com/download/yii/DatePickerDemo.zip