dynamic date in cjuidatepicker

hello there …

i have problem to make date changes automatic with cjuidatepicker

lets this configuration of that datepicker

<div class="row">

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

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

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

				'model'=>$model,

				'attribute'=>'check_in_date',

				'value'=>'2011/04/22',

				//'theme'=>'bee',

				'options'=>array(

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

						 'altField' => '#Reservation_check_in_date',

						 'altFormat'=>'d M yy',

						 'showAnim'=>'fold',

						 'beforeShowDay' => 'js:$.datepicker.noWeekends',


						 'minDate'=>'0',

						 'changeMonth'=>true,

						 'changeYear'=>true,

						 ),

                                'htmlOptions'=>array(

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

                                ),


			));

                ?>

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

	</div>


	<div class="row">

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

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

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

				'model'=>$model,

				'attribute'=>'check_out_date',

				//'theme'=>'bee',

				'options'=>array(

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

						 'showAnim'=>'fade',

						 'altField' => '#Reservation_check_out_date',

						 'altFormat'=>'d M yy',

						 //'minDate'=>'+1',

                'changeMonth' => true,

                'changeYear' => true,

				//'beforeShowDays'=>'js:function(){$(this).datepicker.noWeekends}',

                //'constrainInput' => false,

				//'beforeShowDay'=>'noWeekendsOrHolidays',

						 'beforeShow' => 'js:function(){

                			var selectedDate=$("#'.CHtml::activeId($model,'check_in_date').'").datepicker("getDate");

                			$(this).datepicker("option","minDate",selectedDate);

							

        				}'


						 ),

			));

                ?>

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

	</div>

i wanna to write that code similar to site http://www.stay.com/hotel/, but has problem to determine the initial value of checkin/checkout and determine checkout value when checkin date clicked. If i wanna to create similar to stay.com/hotel, what code that must alter?

Thx for suggestion

This is a very rough idea, it works, but you might want to implement it a little differently.

This to/from date functionality is built into the jQuery datepicker widget. You just can’t access it by using CJuiDatePicker. So, as a quick solution, I wouldn’t use it, and just handcode the datepicker functionality.

What I would do is something like this:

(via: jQuery UI - Datepicker Demos & Documentation)

<div class="row">

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

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

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

</div>

<div class="row">

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

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

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

</div>

	<script>

	jQuery(function() {

		var dates = jQuery( "#<?php echo CHtml::activeID($model, 'check_in_date')?>, #<?php echo CHtml::activeID($model, 'check_out_date')?>" ).datepicker({

			defaultDate: "+1w",

			dateFormat: "yy-mm-dd",

			changeMonth: true,

			numberOfMonths: 3,

			onSelect: function( selectedDate ) {

				var option = this.id == "<?php echo CHtml::activeID($model, 'check_in_date')?>" ? "minDate" : "maxDate",

					instance = jQuery( this ).data( "datepicker" ),

					date = jQuery.datepicker.parseDate(

						instance.settings.dateFormat ||

						jQuery.datepicker._defaults.dateFormat,

						selectedDate, instance.settings );

				dates.not( this ).datepicker( "option", option, date );

			}

		});

	});

	</script>

That should work for your needs.

I would be interested to see what other solutions people come up with.

Let me know your thoughts.

THX!

-Gerry.

thx for reply gerry and example of code, but i’m still use previous code. I have little fix to my code here this.

here code

<div class="row">

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

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

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

				

				'name'=>'Reservation[check_in_date]',

				'value' => ($model->check_in_date)?$model->check_in_date:date('m/d/Y'),

				'options'=>array(

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

                                     'disabled'=>'true',

                                     'showAnim'=>'fold',

                                     //'beforeShowDay' => 'js:$.datepicker.noWeekends',

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

                                        $("#Reservation_check_out_date").val("04/23/2011");/* to automatically assign check out date input value*/

                                        }',

                                    'minDate'=>'0',

                                    'changeMonth'=>true,

                                    'changeYear'=>true,

                                ),

                                'htmlOptions'=>array(

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

                                ),

			));

                ?>

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

	</div>


	<div class="row">

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

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

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

				/*'model'=>$model,

				'attribute'=>'check_out_date',*/

				'name'=>'Resevation[check_out_date]',

				'value' => ($model->check_out_date)?$model->check_in_date:date('m/d/Y', strtotime("+1 day")),

				

				'options'=>array(

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

                                    'showAnim'=>'fade',	 

                                    'changeMonth' => true,

                                    'changeYear' => true,

                                    'showOn' => 'button',

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

                                    'buttonImageOnly' => true,

                                    'beforeShow' => 'js:function(){

                			var selectedDate=$("#'.CHtml::activeId($model,'check_in_date').'").datepicker("getDate");

					selectedDate.setDate(selectedDate.getDate() + 1);

                                        $(this).datepicker("option","minDate",selectedDate);

							

        				}'

				),

				'htmlOptions'=>array('style'=>'font-size:0.8em','disabled'=>'disabled',),

			));

                ?>

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

	</div>

the problem in that case is when after clicking calendar date of check_in input, it should change input value of chekout_date, but no changes were made. Can you help me to solve this? i fell distress about it