Problem With Cjuidatepicker Client Validation

When i add in the “name” field within cjuidatepicker, the client validation for the end_date does not work as specified in the model and I don’t know why. Below are my codes and the problem areas are commented in the codes.

Is there anything wrong or anyway I can allow validation to be done at the client side?

cjuidatepicker for start_date:




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

	'model'=>$model,

	'attribute'=>'start_date',

	'options'=>array(

		'showAnim'=>'fold',

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

		'minDate' => '0',

	        'onSelect'=> 'js:function( selectedDate ) {

			$( "#endDate" ).datepicker("option", "minDate", selectedDate); //set the end date cjuidatepiker minDate and its working fine

		}',

						

	),

	'htmlOptions'=>array(

		'style'=>'width:105px;vertical-align:top;font-size:0.9em;'

	),

));



cjuidatepicker for end_date:




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

	'name'=>'endDate', //Problem area:added in name so that in start date cjuidatepicker, I can assign the minDate of endDate, however I cannot do the client validation of a "required" field as specified within the rules of the model. 

	'model'=>$model,

	'attribute'=>'end_date',

	'options'=>array(

		'showAnim'=>'fold',

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

		'onSelect'=> 'js:function( selectedDate ) {

		$("#eDate").val(selectedDate);

	        }',				

	),

	'htmlOptions'=>array(

		'style'=>'width:105px;vertical-align:top;font-size:0.9em;'

	),

));



Display error Message of end date cjuidatepicker using client validation:




echo $form->error($model,'end_date'); //however this error message does not show even when the end_date cjuidatepicker has no values selected



Model rules of end date:




public function rules()

{

	return array(

                array('start_date, end_date', 'required'),

	);

}



Dear Friend

Try to assign different ids for each widget.

if you assign name then the model and its attributes are neglected.

Hi,

I tried adding in these at the various cjuidatepicker but it still does not validate.




'id'=>'start_date', //for the start date cjuidatepicker

'id'=>'end_date', //for the end date cjuidatepicker



I’ve also tried adding the above and removing the “name” variable in the end date cjuidatepicker but it still does not validate.

Am I interpreting your solutions wrongly?

For the datepicker name (in order to use the widget’s minDate property), you should do it like this in order not to mess up with your validation rules:


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

        'model'=>$model,

        'attribute'=>'start_date',

        'options'=>array(

                'showAnim'=>'fold',

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

                'minDate' => '0',

                'onSelect'=> 'js:function( selectedDate ) {

                        $( "#' . CHtml::activeId($model, 'endDate') . '" ).datepicker("option", "minDate", selectedDate); //set the end date cjuidatepiker minDate and its working fine

                }',

        ),

        'htmlOptions'=>array(

                'style'=>'width:105px;vertical-align:top;font-size:0.9em;'

        ),

));


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

        // You don't need to specify a 'name' here, just use CHtml::activeId() above

        //'name'=>'endDate', //Problem area:added in name so that in start date cjuidatepicker, I can assign the minDate of endDate, however I cannot do the client validation of a "required" field as specified within the rules of the model. 

        'model'=>$model,

        'attribute'=>'end_date',

        'options'=>array(

                'showAnim'=>'fold',

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

                'onSelect'=> 'js:function( selectedDate ) {

                $("#eDate").val(selectedDate); // Why do you need this?

                }',                             

        ),

        'htmlOptions'=>array(

                'style'=>'width:105px;vertical-align:top;font-size:0.9em;'

        ),

)); ?>

Edit: Was missing an opening quote in the modified line – corrected

I’ve been figuring out for a very long time.

Really thanks a lot! It works! :)

Welcome. Btw that line should read:


$( "#' . CHtml::activeId($model, 'end_date') . '" ).datepicker("option", "minDate", selectedDate);

Ok. Tks!

Btw the code below was just added in to test something and I forget to delete it, so you can just ignore that.




$("#eDate").val(selectedDate); // Why do you need this?