How to use jquery-datepicker for date range

Question

Can someone tell me how to use the jquery-datepicker for a date range in yii? I got it to work for a single date how do i modify it to get a multiple dates. I am new to yii framework.

Solution 1

Try This For Example:

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

Solution 2

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

Solution 3

Yii CJuiDatePicker: Date Range

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

Solution 4

I didn't find the solution to do it with CJuiDatePicker. Instead, I used the following in my view file:

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

Don't forget to replace ReportForm_date_start and ReportForm_date_end to your own element ids.

View more solutions

Comments

[kolossus]

Give some explanation/background on your code. This is just a bunch of code

[Edward]

What does this add beyond @jamband's answer?