unknown new textbox when using CJuiDatePicker

Hi Guys,

I am new to yii. I am following the tutorial here:

and created a new webapp called logonapp.

I wanted to use CJuiDatePicker for Hire Date so I just put the following code in logonapp/htdocs/protected/views/employee/create.php

<?php 

$this->widget('zii.widgets.jui.CJuiDatePicker', array(

    'name'=>'Employee_hireDate',

    'name'=>'Employee_leaveDate',

    // additional javascript options for the date picker plugin

    'options'=>array(

    	'dateFormat'=>'yy-mm-dd',

        'showAnim'=>'fold',

    ),

    'htmlOptions'=>array(

        'style'=>'height:20px;'

    ),

));

?>

The problem is that after inserting above code, an extra new textbox appear on the page. I just want put CJuiDatePicker into the existing hire date textbox element. Any advice would be helpful. Thanks !

regards.

Mark Thien

I had exactly the same problem yesterday. I also thought that it will be easy to add CJuiDatePicker to an existing form filed. I haven’t got time to seek for an answer if it is possible at all? I’ve ended up with removing original input box (to which I wanted to attach CJuiDatePicker) and using the one provided by this class and placing / formatting it, so it would look the same as rest of form elements.

Why would you attach a CJuiDatePicket to an existing input box… when there are options to set the model and attribute for the CJuiDatePicker…

I’m using it like this:

  <?php echo $form->labelEx($model,'date'); ?>

  <?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(

  	'model'=>$model,

  	'attribute'=>'date',

  	'language'=>'hr',

  	'options'=>array(

  		'dateFormat'=>'dd.mm.yy',

  		'showAnim'=>'fold',

  	),

  )); ?>

  <?php echo $form->error($model,'date'); ?>

For all those situation, where you use it not related to a model. For example, in already discussed in some other thread, where I have two different date pickers not related to any particular model property, which are used to build date period and only that period is then compared to a model’s property.

And also, this is a behaviour learned when using jQuery before I get know to Yii. In pure jQuery you have create an edit box yourself and then bind a calendar to it. It is Yii helper (wrapper) that does this job for you, am I right?

And third: I am against limits anywhere. Therefore I think that binding option should be implemented, for example by adding another feature that would tell class if input which name was provided in name property already exists or should be recreated.

But if you are already creating a textfield… you have the attribute for that… be it part of the table or just of the model…

so why just bind the date to it… why not change the text input with the date input…

That is exactly what I did! :]

My ask about binding was only related to the fact that I was a little bit surprised that Yii will generate required input for me. I thought (with my experience from pure jQuery coding) that I have to create this edit myself and bind calendar to it. Just as I would do in pure HTML + jQuery. Nothing else.

under protected\views\employee\_form.php

I changed to the hireDate section to:

	<div class="row">

		<?php echo $form->labelEx($model,'hireDate'); ?>

		<?php //echo $form->textField($model,'hireDate'); ?>

		<?php 

		$this->widget('zii.widgets.jui.CJuiDatePicker', array(

			'name'=>'Employee[hireDate]',

			'id'=>'Employee_hireDate',

			// additional javascript options for the date picker plugin

			'options'=>array(

				'dateFormat'=>'yy-mm-dd',

				'showAnim'=>'fold',

			),

			'htmlOptions'=>array(

				'style'=>'height:20px;'

			),

		));

		?>		

		<?php echo $form->error($model,'hireDate'); ?>

	</div>

The problem here is that I got the name and id as below:

		'name'=>'Employee[hireDate]',


		'id'=>'Employee_hireDate',

from seeing the html source code from the browser. Anyone can kindly advice me of better way doing this?

regards,

Mark

Use CHtml::ActiveId() and CHtml::ActiveName().

/Tommy

Ah…How?

Assume

$model=new Employee;

then this should give the same result as the example above

'name'=>Chtml::activeName($model, 'hireDate'),

'id'=>Chtml::activeId($model, 'hireDate'),

/Tommy

So mean something like this?

<?php 

     $this->widget('zii.widgets.jui.CJuiDatePicker', array(

          'name'=>Chtml::activeName($model, 'hireDate'),      //<-------- Changes

          'id'=>Chtml::activeId($model, 'hireDate'),          //<-------- Changes

          // additional javascript options for the date picker plugin

          'options'=>array(

               'dateFormat'=>'yy-mm-dd',

               'showAnim'=>'fold',

          ),

          'htmlOptions'=>array(

               'style'=>'height:20px;'

          ),

     ));

?>              

I am new to Yii and sometimes the answers on here are a bit cryptic to me

Not necessarily because CJuiDataPicker offers model and attribute propertys, which is probably what you’ll want to use.

I used those myself, recently.

/Tommy

To all,

I got this to work

in _form.php

...

<div class="row">

	<?php echo $form->labelEx($model,'StartDate'); ?>

	<?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(

		'model'=>$model,

		'attribute'=>'StartDate',

		'value'=>$model->StartDate,


		// additional javascript options for the date picker plugin

		'options'=>array(

			'autoSize'=>true,

			'defaultDate'=>$model->StartDate,

			'buttonImage'=>Yii::app()->baseUrl.'/images/icons/date.png',

			'buttonImageOnly'=>true,

			'buttonText'=>'Select',

			'selectOtherMonths'=>true,

			'showAnim'=>'fold',

			'showButtonPanel'=>true,

			'showOn'=>'button',

			'showOtherMonths'=>true,

		),

	)); ?>

	<?php echo $form->error($model,'StartDate'); ?>

</div>

...

In model

	/**

	 * Actions to take prior to saving the model.

	 * @return boolean parent::beforeSave()

	 */

	public function beforeSave()

	{

		if ($this->StartDate == '') {

			$this->setAttribute('StartDate', null);

		} else {

		   $this->StartDate=date('Y-m-d', strtotime($this->StartDate));

		}


		if ($this->StopDate == '') {

			$this->setAttribute('StopDate', null);

		} else {

		   $this->StopDate=date('Y-m-d', strtotime($this->StopDate));

		}


		return parent::beforeSave();

	} //End beforeSave()	


	/**

	 * Actions to take after to saving the model.

	 * @return boolean parent::afterFind()

	 */

	public function afterFind()

	{

		$retVal = parent::afterSave();

		$this->StartDate=date('m/d/Y', strtotime($this->StartDate)); 

		if(!is_null($this->StopDate)) {

			$this->StopDate=date('m/d/Y', strtotime($this->StopDate)); 

		} //EndIf


		return $retVal;

	} //End beforeFind()	

In the code above, I had two dates on the form and a need to save NULL into one of them. (if StopDate is null then ‘until further notice’)