Как использовать jquery-datepicker для диапазона дат

Question

Может кто-нибудь сказать мне, как использовать jquery-datepicker для диапазона дат в yii?Я заставил его работать на одну дату, как мне изменить его, чтобы получить несколько дат.Я новичок в YII Framework.

Answer 1

Попробуйте это например:

<?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 2

Yii CJuiDatePicker: диапазон дат

<?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 3

Я не нашел решения сделать это с CJuiDatePicker. Вместо этого я использовал следующее в моем файле просмотра:

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

Не забудьте заменить ReportForm_date_start и ReportForm_date_end на ваши собственные идентификаторы элементов.

Answer 4

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

Answer 5

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

Учебник: http://wimarbueno.blogspot.com/2014/04/Yii-CJuiDatePicker-rango-de-fechas-en-datepicker-de-jQuery-UI.html

Answer 6

Вы можете добавить 'yearRange' в опции.Вы можете заполнить его 'дата начала: дата окончания', пример 'yearRange' => '2008: 2018' или, сколько лет до и после этого года, напишите код, используя - и +, пример 'yearRange' => '- 8: +8', это означает, что за 8 лет до этого года и 8 лет после этого года.

Answer 7

Может быть, это та подсказка, которую вы искали:

диапазон дат содержит 2 даты, по одной на каждом конце

Предполагая, что вы знаете, как использовать datepicker виджет для получения одной даты от пользователя, самый простой подход - просто создать 2 экземпляра DatePicker в вашем представлении и использовать 2 даты, отправленные обратно вашему контроллеру, в качестве границ диапазона дат в вашей модели.

Answer 8

Пожалуйста, следуйте документации jQuery UI , чтобы узнать, как создать диапазон дат.

После прочтения документации по jQuery UI вы должны понять, как она работает. Затем вы можете использовать CJuiDatePicker виджет для генерации того, что вам нужно.

Нетрудно настроить виджеты Yii под ваши нужды, я бы сказал, что это очень просто и эффективно.