Yii

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

By November 23, 2017 No Comments

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…

Leave a Reply