cjuidatepicker根據第一個日期字段yii中的選定日期限制第二個日期字段中的日期

Question

<?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'); ?>

我想限制end_date字段中的日期，該日期不能低於start_date中的日期，例如，如果start_date中選擇的日期為01-06-2014，則允許用戶選擇2014年1月6日之后的日期，且不少於01 -06-2014如何限制end_date字段中的日期選擇？

Answer 1

使用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>

也使用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',
     ),
));