[Solved] Cjuidatepicker Onselect

hi all,

i want to ask about cjuidatepicker

i have 2 field rent_start_date and rent_end_date

when i select rent_start_date ex: 2012-09-01 then the rent_end_date automatically will fill 2022-09-01

can someone give me the example on select?




<div class="row">

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

		<?php  

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

		        'model'=>$model,

			'attribute'=>'rent_start_date',

		        'value'=>$model->rent_start_date,

		        'options'=>array(

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

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

		            'changeMonth'=>'true', 

		            'changeYear'=>'true', 

		            'showOn'=>'both',

			'buttonImage'=>Yii::app()->request->baseUrl . '/images/calendar.gif',

					'buttonImageOnly' => true,

		        'htmlOptions'=>array('size'=>'10',

				'readonly'=>"readonly")

		   ));

		?>

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

	</div>


	<div class="row">

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

		<?php  

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

		        'model'=>$model,

				'attribute'=>'rent_end_date',

		        'value'=>$model->rent_start_date,

		        'options'=>array(

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

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

		            'changeMonth'=>'true', 

		            'changeYear'=>'true', 

		            'showOn'=>'both',

			    'buttonImage'=>Yii::app()->request->baseUrl . '/images/calendar.gif',

			    'buttonImageOnly' => true,

			  ),

		        'htmlOptions'=>array('size'=>'10',

				'readonly'=>"readonly")

		   ));

		?>

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

	</div>



Thanks.

This should do it (not tested on this code, but that’s what I’m generally doing)


<div class="row">

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

    <?php  

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

            'model'=>$model,

            'attribute'=>'rent_start_date',

            //'value'=>$model->rent_start_date, // this is not needed

            'options'=>array(

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

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

                'changeMonth'=>'true', 

                'changeYear'=>'true', 

                'showOn'=>'both',

                'buttonImage'=>Yii::app()->request->baseUrl . '/images/calendar.gif',

                'buttonImageOnly' => true,

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

                    dateArray = selectedDate.split('-');

                    dateObject = new Date(dateArray[2] * 1, dateArray[1] * 1 - 1, dateArray[0] * 1);

                    minDateObject = new Date(dateObject.getFullYear() + 10, dateObject.getMonth(), dateObject.getDate());

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

                }",

            ),

            'htmlOptions'=>array('size'=>'10', 'readonly'=>"readonly"),

        ));

    ?>

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

</div>


<div class="row">

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

    <?php  

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

            'model'=>$model,

            'attribute'=>'rent_end_date',

            //'value'=>$model->rent_start_date, // this is not needed

            'options'=>array(

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

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

                'changeMonth'=>'true', 

                'changeYear'=>'true', 

                'showOn'=>'both',

                'buttonImage'=>Yii::app()->request->baseUrl . '/images/calendar.gif',

                'buttonImageOnly' => true,

            ),

            'htmlOptions'=>array('size'=>'10', 'readonly'=>"readonly"),

        ));

    ?>

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

</div>

Thanks bennouna, it works very well,

but i add a little code to show the result in another field




<div class="row">

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

    <?php  

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

            'model'=>$model,

            'attribute'=>'rent_start_date',

            'options'=>array(

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

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

                'altField'=>'#rent_end_date' // i add this to show the result in another field

                'changeMonth'=>'true', 

                'changeYear'=>'true', 

                'showOn'=>'both',

                'buttonImage'=>Yii::app()->request->baseUrl . '/images/calendar.gif',

                'buttonImageOnly' => true,

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

                    dateArray = selectedDate.split('-');

                    dateObject = new Date(dateArray[2] * 1, dateArray[1] * 1 - 1, dateArray[0] * 1);

                    minDateObject = new Date(dateObject.getFullYear() + 10, dateObject.getMonth(), dateObject.getDate());

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

                }",

            ),

            'htmlOptions'=>array('size'=>'10', 'readonly'=>"readonly"),

        ));

    ?>

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

</div>



hope this can help other people :)

You’re welcome.


'altField'=>'#rent_end_date' // i add this to show the result in another field

Which result are you showing there? Normally altField shows the date that has been selected, so you will display ‘2012-09-01’ in #rent_end_date.

http://jqueryui.com/demos/datepicker/#alt-field

the result show in #rent_end_date was ‘2022-09-01’, it works for me using that altField in rent_start_date.