Cómo usar jquery-datepicker para el rango de fechas

Question

¿Alguien me puede decir cómo usar jquery-datepicker para un rango de fechas en yii? Lo tengo para trabajar en una sola fecha, ¿cómo lo modifico para obtener varias fechas? Soy nuevo en yii framework.

Answer 1

Siga la documentación de jQuery UI para aprender a crear el intervalo de fechas.

Después de leer los documentos de jQuery UI, debe comprender cómo funciona. Luego puede usar el widget CJuiDatePicker para generar lo que necesita.

No es difícil ajustar los widgets Yii a sus necesidades, prefiero decir que es muy simple y eficiente.

Answer 2

Ésta es quizá la idea de que estabas buscando:

un intervalo de fechas tiene 2 fechas, una en cada extremo

suponiendo que sabe cómo usar widget de datepicker para recuperar una sola fecha del usuario, el enfoque más simple sería simplemente crear una instancia de 2 fechadores en su vista y usar las 2 fechas enviadas a su controlador como los bordes del rango de fechas en su modelo.

Answer 3

Pruebe esto, por ejemplo:

<?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model'=>$model, 'attribute'=>'birthday', 
    'options'=>array(
     'dateFormat'=>'yy-mm-dd', 
     'yearRange'=>'-70:+0', 
     'changeYear'=>'true', 
     'changeMonth'=>'true', 
    ), 
)); ?> 

Answer 4

'options'=>array(
'showAnim'=>'fold', 
'dateFormat'=>'yy-mm-dd', 
'changeMonth'=>true, 
'changeYear'=>true, 
'yearRange'=>'-100:+0', 
'defaultDate'=>'+0' 
), 

Answer 5

no he encontrado la solución a hacerlo con CJuiDatePicker. En su lugar, he utilizado la siguiente en mi archivo de vista:

<?php 
Yii::app()->getClientScript()->registerCoreScript('jquery.ui'); 
Yii::app()->clientScript->registerCssFile(
    Yii::app()->clientScript->getCoreScriptUrl(). 
    '/jui/css/base/jquery-ui.css' 
); 
Yii::app()->clientScript->registerScript('daterangescript'," 
    var dates = $('#ReportForm_date_start, #ReportForm_date_end').datepicker({ 
     defaultDate: '+1w', 
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     onSelect: function(selectedDate) { 
      var option = this.id == 'ReportForm_date_start' ? 'minDate' : 'maxDate', 
       instance = $(this).data('datepicker'); 
       date = $.datepicker.parseDate(
        instance.settings.dateFormat || 
        $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
      dates.not(this).datepicker('option', option, date); 
     } 
    }); 

    $('#ReportForm_date_start, #ReportForm_date_end').datepicker('option', 'dateFormat', 'yy-mm-dd'); 
",CClientScript::POS_READY); 
?> 

No se olvide de reemplazar ReportForm_date_start y ReportForm_date_end a sus propios identificadores de elemento.

Answer 6

puede agregar 'yearRange' en la opción. puede completarlo con 'fecha de inicio: fecha de finalización', ejemplo 'yearRange' => '2008: 2018', o, cuántos años antes y después de este año, escriba el código usando - y +, ejemplo 'yearRange '=>' - 8: +8 ', significa que 8 años antes de este año y 8 años después de este año.

Answer 7

Yii CJuiDatePicker: Rango de fechas

<?php 
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name'=>'datepicker-min-max',  
    'value'=>date('d-m-Y'), 
    'options'=>array(  
     'showButtonPanel'=>true, 
     'minDate'=>-5, 
     'maxDate'=>"+1M +5D", 
    ), 
    'htmlOptions'=>array(
     'style'=>'' 
    ), 
)); 
?> 

Answer 8

From: <input type="text" name="date_from" id="date_from" />   
To: <input type="text" name="date_to" id="date_to" /> 


    <?php 
     $this->widget('zii.widgets.jui.CJuiDatePicker', array(
      'name' => 'date_from', 
      // additional javascript options for the date picker plugin 
      'options' => array(
       'showAnim' => "slideDown", 
       'changeMonth' => true, 
       'numberOfMonths' => 1, 
       'showOn' => "button", 
       'buttonImageOnly' => false, 
       'dateFormat' => "yy-mm-dd", 
       'showButtonPanel' => true, 
       'onClose' => 'js:function(selectedDate) { $("#date_to").datepicker("option", "minDate", selectedDate); }',    
      ) 
     )); 
     $this->widget('zii.widgets.jui.CJuiDatePicker', array(
      'name' => 'date_to', 
      // additional javascript options for the date picker plugin 
      'options' => array(
       'showAnim' => "slideDown", 
       'changeMonth' => true, 
       'numberOfMonths' => 1, 
       'showOn' => "button", 
       'buttonImageOnly' => false, 
       'dateFormat' => "yy-mm-dd", 
       'showButtonPanel' => true, 
       'onClose' => 'js:function(selectedDate) { $("#date_from").datepicker("option", "maxDate", selectedDate); }', 
      ) 
     )); 
?> 

Tutorial: http://wimarbueno.blogspot.com/2014/04/Yii-CJuiDatePicker-rango-de-fechas-en-datepicker-de-jQuery-UI.html