CODEWITHSUNDEEP
phpyii
Dhanush Bala
Dhanush Bala

Reputation: 1132

cjuidatepicker restrict dates in second date field based on selected date in first date field yii

<?php

     $this->widget('zii.widgets.jui.CJuiDatePicker',array(
        'name'=>'Settings[start_date]',
        'value'=>date("d-m-Y",strtotime($model->start_date)),
        'options'=>array(
          //'buttonImage'=>Yii::app()->theme->getBaseUrl().'/img/calendar.png',
          //'buttomImageOnly'=>true,
          //'showOn'=>'button',
          'changeMonth'=> true,
          'changeYear'=> true,
          'showAnim'=>'fold',
          'dateFormat' => 'dd-mm-yy', 
          ),
        'htmlOptions'=>array(
           'id'=>'start_date',
         ),
      ));
    ?>
    <?php echo $form->error($model,'start_date'); ?>
        </div></div></td>
        <td style="width:516px"><div class="formItem leftLabel"><label for="end_date" class="required">End Date </label><div class="formInputBox" style="width:210px;">
    <?php
      $this->widget('zii.widgets.jui.CJuiDatePicker',array(
         'name'=>'Settings[end_date]',
         'value'=>date("d-m-Y",strtotime($model->end_date)),
         'options'=>array(
         //'buttonImage'=>Yii::app()->theme->getBaseUrl().'/img/calendar.png',
         //'buttomImageOnly'=>true,
         //'showOn'=>'button',
         'changeMonth'=> true,
         'changeYear'=> true,
         'showAnim'=>'fold',
         'dateFormat' => 'dd-mm-yy', 
         ),
        'htmlOptions'=>array(
        'id'=>'end_date',
         ),
    ));
    ?>
    <?php echo $form->error($model,'end_date'); ?>

I would like to restrict dates in end_date field which should not be below the date in start_date,E.g. If date selected in start_date is 01-06-2014, then user is allowed to pick date after 01-06-2014, not less than 01-06-2014 How can I restrict date picking in end_date field ?

Upvotes: 0

Views: 468

Answers (1)

Sajin
Sajin

Reputation: 151

Simple Method using jquery.

<script>
$('#start_date').change(function(){
var start_date = $(this).val();
$("#end_date").datepicker( "option","minDate",start_date);

});
$('#end_date').change(function(){
var end_date = $(this).val();
$("#start_date").datepicker( "option","maxDate",end_date);

});
</script>

Also using CJuiDatePicker 

$this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'model' => $model,
    'attribute'=>'start_date',
    'options'=>array(
      'changeMonth'=> true,
      'changeYear'=> true,
      'showAnim'=>'fold',
      'dateFormat' => 'dd-mm-yy',
      'onSelect' => 'js:function( selectedDate ) {
                     $( "#' . CHtml::activeId($model, 'end_date') . '" ).datepicker("option", "minDate", selectedDate); 
            }' 
      ),
    'htmlOptions'=>array(
       'id'=>'start_date',
     ),
  ));

$this->widget('zii.widgets.jui.CJuiDatePicker',array(
     'model' => $model,
     'attribute'=>'end_date',
     'options'=>array(
     'changeMonth'=> true,
     'changeYear'=> true,
     'showAnim'=>'fold',
     'dateFormat' => 'dd-mm-yy', 
     ),
    'htmlOptions'=>array(
    'id'=>'end_date',
     ),
));

Upvotes: 1

Related Questions