Restrict the date on second CJuiDatePicker based on selected date in first CJuiDatePicker

Hello guys,

Having issue in  datepicker  where end date is greater then start date  do as below.

<pre class="prettyprint">//booking_from datepicker
<?php $this->widget('zii.widgets.jui.CJuiDatePicker',array(
'id' => CHtml::getIdByName(get_class($model) . '[booking_from]'),
'name'=>'booking_from',
'model'=>$model,
'attribute' => 'booking_from',
//'flat'=>true,
'model'=>$model,
'options'=>array(
'dateFormat' => 'D, d M yy',
'showAnim'=>'slide',//'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
'changeMonth'=>true,
'changeYear'=>true,

//'disabled'=>true,
),
'htmlOptions'=>array(
'style'=>'','class'=>'form-control booking_from',
'placeholder'=>'Check IN Date',
),
)); ?>

</pre>
<pre class="prettyprint">//booking_to datepicker
<?php echo $form->labelEx($model,'booking_to'); ?>
<?php $this->widget('zii.widgets.jui.CJuiDatePicker',array(
'id' => CHtml::getIdByName(get_class($model) . '[booking_to]'),
'name'=>'booking_to',
'model'=>$model,
'attribute' => 'booking_to',
//'flat'=>true,
'model'=>$model,
'options'=>array(
'dateFormat' => 'D, d M yy',
'showAnim'=>'slide',//'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
'changeMonth'=>true,
'changeYear'=>true,

//'disabled'=>true,
),
'htmlOptions'=>array(
'style'=>'','class'=>'form-control booking_to',
'placeholder'=>'Check Out Date',
),
)); ?>

now simply add this jquery in your page :

<script>
//set selected date based on change date picker value
jQuery(document).ready(function(){

jQuery(".booking_from").datepicker({
dateFormat: 'D, d M yy',
onSelect: function(selected) {
jQuery(".booking_to").datepicker("option","minDate", selected)
}
});
jQuery(".booking_to").datepicker({
dateFormat: 'D, d M yy',
onSelect: function(selected) {
jQuery(".booking_from").datepicker("option","maxDate", selected)
}
});
});
</script>

Hope this will help you.

Thanks…