Mitech Preloader
Yii

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

block

Hello guys,

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

[php]
<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’,
),
)); ?>

[/php]

now simply add this jquery in your page :

[php]
<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>

[/php]

Hope this will help you.

Thanks…

blank