Combining activeTextField and a widget (datepicker)

I have a date attribute that is part of a model, and this is how i want to get the date:




<? echo CHtml::activeTextField($model, "my_date"); ?>

But I want the date to be chosen by the datepicker widget:




<?

$this->widget('application.extensions.jui.EDatePicker',

              array(

                    'name'=>'publish_date',

                    'language'=>'no',

                    'mode'=>'focus',

                    'dateFormat'=>'d.M yy',

                    'value'=>date('j.M Y'),

                    'fontSize'=>'0.8em',

                    'htmlOptions'=>array('size'=>30,'class'=>'date'),

                   )

             );

?>

Can this be done? And if so, how?

This seems to work:




...

'name'=>'My_model[my_date]',

...



/Tommy

Well, not really. I mean, it will post the result in a array-variable, but it wont link to the model in the "yii way". I still will need to validate the input etc.

I think the way to go is to keep the activeTextField part, put a ‘id=my_date_id’ in the html options, and somehow make the widget datepicker link to this id. I haven’t dug into how I would change the widget to make this work yet, but hopefully I will find this out or someone else can point me to this who has experience with widgets?!

The base class CInputWidget needs the properties “model” and “attribute” to be set, then it will select an activeTextField for you. I assumed I could just set the name (looks the same in the http request), but didn’t check which input field got selected.

/Tommy

I have the same problem, but haven’t looked into it. If you found a solution, could you post it here?

I`m using yii 1.1 and used this:




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

    

    'name'=>'user[Birthdate]',

    //'id'=>'user_Birthdate',

    'model'=>$model,

    

    // additional javascript options for the date picker plugin

    'options'=>array(

        'showAnim'=>'fold',

    ),

    'htmlOptions'=>array(

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


    ),

));


?>



I think that you can use it too, or maybe change a bit but the idea is the same.

one important thing is when I used “model->$model” before "name->… " it didn’t work.

hope I help…

I am having the same problem too. When I click submit form button, the value is blank. It didn’t really attach to active model like other textbox which retain value after postback. Is there anyone has solution for this?

Seems like CHtml::activeName(model, attribute) will generate the correct name for you. In my case, I have to take care of an additional data type issue (validation error due to type mismatch).

/Tommy

Note: the properties $model and $attribute was (IIRC) added in an updated CJuiDatePicker, but that was still beyond my knowledge when this post was created.

Extend the CJuiDatePicker as given below and save at applications’ widget folder

<?php

Yii::import(‘zii.widgets.jui.CJuiDatePicker’);

class ECJuiDatePicker extends CJuiDatePicker

{

/**


 * Run this widget.


 * This method registers necessary javascript and renders the needed HTML code.


 */


public function run()


{


	list(&#036;name,&#036;id)=&#036;this-&gt;resolveNameID();





	if(isset(&#036;this-&gt;htmlOptions['id']))


		&#036;id=&#036;this-&gt;htmlOptions['id'];


	else


		&#036;this-&gt;htmlOptions['id']=&#036;id;


	if(isset(&#036;this-&gt;htmlOptions['name']))


		&#036;name=&#036;this-&gt;htmlOptions['name'];


	else


		&#036;this-&gt;htmlOptions['name']=&#036;name;





	if(&#036;this-&gt;hasModel())


		echo EHtml::activeTextField(&#036;this-&gt;model,&#036;this-&gt;attribute,&#036;this-&gt;htmlOptions);


	else


		echo EHtml::textField(&#036;name,&#036;this-&gt;value,&#036;this-&gt;htmlOptions);





	&#036;options=CJavaScript::encode(&#036;this-&gt;options);





	&#036;js = &quot;jQuery('#{&#036;id}').datepicker(&#036;options);&quot;;





	if (isset(&#036;this-&gt;language)){


		&#036;this-&gt;registerScriptFile(&#036;this-&gt;i18nScriptFile);


		&#036;js .= &quot;&#092;njQuery('#{&#036;id}').datepicker('option', jQuery.datepicker.regional['{&#036;this-&gt;language}']);&quot;;


	}


	Yii::app()-&gt;getClientScript()-&gt;registerScript(__CLASS__.'#'.&#036;id, &#036;js);


}

}

?>

Apply the new extended class as given below in your view file and will work definitively

<?php $this->widget(‘application.widgets.base.ECJuiDatePicker’, array(‘model’=>$model,‘attribute’=>‘scheduleEndDate’,

					      // additional javascript options for the date picker plugin


					      'options'=&gt;array(


								'minDate'=&gt;&quot;0&quot;, 


								'maxDate'=&gt; &quot;60&quot;,


								'showOn'=&gt;'button',


								'buttonImage'=&gt;'images/calendar.gif',


								'buttonImageOnly'=&gt;true,


								'dateFormat'=&gt;Common::clientDateFormat(),


					      ),


					      'htmlOptions'=&gt;array(


					          'style'=&gt;'height:20px;width:100px;'


					      	  ,'readonly'=&gt;'true'


					      ),


					  )); 


				?&gt;

Hi, I got the ‘jui.EDatePicker’ and using on my one of Form with following setting where a user can select any date by jui.EDatePicker and it save to right table through right Model here is setting…




<div class="row">

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

    <?php $this->widget('application.extensions.jui.EDatePicker',

     array(

          'name'=>'expire_time',

          'attribute'=>'expire_time', // Model attribute filed which hold user input

          'model'=>$model,            // Model name

          'language'=>'en',

          'mode'=>'imagebutton',

          'theme'=>'redmond',

          'value'=>date('Y-m-d'),

          'htmlOptions'=>array('size'=>15),

          'fontSize'=>'0.8em'

         )

      );?>

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

</div>

I hope it will work with all as mine work like charm

Thanks Shaked!!

This solution worked for me

-Gabo

Thanx for sharing :)

Worked for me :)

Thx

Hi there When I was trying to use the above code i got error saying


Alias "application.extensions.jui.EDatePicker" is invalid. Make sure it points to an existing PHP file.


C:\xampp\xampp\htdocs\yii\framework\YiiBase.php(310)


298         if($isClass && (class_exists($className,false) || interface_exists($className,false)))

299             return self::$_imports[$alias]=$className;

300 

301         if(($path=self::getPathOfAlias($alias))!==false)

302         {

303             if($isClass)

304             {

305                 if($forceInclude)

306                 {

307                     if(is_file($path.'.php'))

308                         require($path.'.php');

309                     else

310                         throw new CException(Yii::t('yii','Alias "{alias}" is invalid. Make sure it points to an existing PHP file.',array('{alias}'=>$alias)));

311                     self::$_imports[$alias]=$className;

312                 }

313                 else

314                     self::$classMap[$className]=$path.'.php';

315                 return $className;

316             }

317             else  // a directory

318             {

319                 if(self::$_includePaths===null)

320                 {

321                     self::$_includePaths=array_unique(explode(PATH_SEPARATOR,get_include_path()));

322                     if(($pos=array_search('.',self::$_includePaths,true))!==false)

plz tell me how to resolve this error.

Perhaps rahul.vit09 has a newer version of Yii, so the code provided by Khan didn’t work for him. It happened to me as well. I looked into the Class Reference and found this:




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

   'name'=>'publishDate',

   // additional javascript options for the date picker plugin

      'options'=>array(

            'showAnim'=>'fold',

      ),

 	'htmlOptions'=>array(

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

 	),

));



I applied it to my own project and got this working fine:




<div class="row">

   <?php echo $form->labelEx($model,'Date Of Birth'); ?>

   <?php 

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

   	'name'=>'dateofbirth',

   	'options'=>array('changeMonth'=>'true', 'changeYear'=>'true'),

   	'htmlOptions'=>array(''=>'')  // None at the moment

	));

   ?>

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

 </div>



The difference, as you can see, is the path to the class.

First it was:

application.extensions.jui.EDatePicker

But now it is located at:

zii.widgets.jui.CJuiDatePicker

[size="4"]No need to use additional textfield , only widget required . [/size]

      &lt;?php		


	&#036;this-&gt;widget('zii.widgets.jui.CJuiDatePicker', array(


			'name'=&gt;'LeaveSummary[LS_FROM]',         // LeaveSummary (Model) , LS_FROM (Attribute) 


			'model'=&gt;&#036;model,


			'attribute'=&gt;'LS_FROM',


				// additional javascript options for the date picker plugin


			'options'=&gt;array(


				'showAnim'=&gt;'fold',


				'dateFormat'=&gt;'yy-mm-dd',


			),


			'htmlOptions'=&gt;array(


				'style'=&gt;'height:20px;'


			),


			));				


	?&gt;

[size="3"]This will work[/size]

are you add javascript ? i use that but no changes value only 0

Are you trying to save the value selected by datepicker in a different form field, one associated with a model? You should be able to simply assign an ID to the form field and use that as the selector for the ‘altField’ option. I’ve done this with hidden fields that stored the start date of one of my models. It worked like a charm. For example, the code below shows the datepicker widget populating an alternate (target) form field using an alternate format than datepicker’s default.




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

    'name'=>'datepicker_field', // Name of the datepicker form field.

    // additional javascript options for the date picker plugin

    'options'=>array(

        'showAnim'=>'fold',

        'altField'=>'#some_selector', // The jQuery selector of the "target" field

	'altFormat'=>'yy-mm-dd', // If you want the target field to have a different format

    ),

    'htmlOptions'=>array(

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

    ),

));



When the value is selected in the datepicker, it should populate whatever form field has the unique id, ‘some_selector’. For example:




<?php echo $form->hiddenField($model, 'start_date', array('id'=>'#some_selector', 'value'=>'')); ?>



Mine was a hidden field, but I don’t see why this wouldn’t work with a text field.

Good luck!

I use datepicker like




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

			<?php

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

			'name'=>'MutationOrder[birthday]',

			'value'=>$model->birthday,

			'options'=>array(

			'showAnim'=>'fold',

			'dateFormat'=>'dd MM yy',

			 ),

			));

			?>

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



and usefull.

Hi

I want to repeat the post once again as posted by member already:

I am having the same problem too. When I click submit form button, the value is blank. It didn’t really attach to active model like other textbox which retain value after postback. Is there anyone has solution for this?