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字段的日期，其不應該在起始日期的日期，E.g下方。如果在start_date中選擇的日期是01-06-2014，那麼允許用戶在01-06-2014之後選擇日期，不能少於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', 
    ), 
));