CODEWITHSUNDEEP
yiijquery-ui-datepicker
Necia
Necia

Reputation: 91

How to use jquery-datepicker for date range

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.

Upvotes: 9

Views: 15936

Answers (8)

Wilzon
Wilzon

Reputation: 119

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

Upvotes: 0

Boopathi Rajan
Boopathi Rajan

Reputation: 1210

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

Upvotes: 1

siuplug
siuplug

Reputation: 1

you can add 'yearRange' on the option. you can fill it with 'start date:end date', example 'yearRange'=>'2008:2018', or, how many years before and after this present year, write the code using - and +, example 'yearRange'=>'-8:+8', it means that 8 years before this years and 8 years after this years.

Upvotes: 0

just-euphoria
just-euphoria

Reputation: 19

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

Upvotes: 1

Osh Mansor
Osh Mansor

Reputation: 1232

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.

Upvotes: 1

jamband
jamband

Reputation: 926

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

Upvotes: 8

hobs
hobs

Reputation: 19289

Maybe this is the clue you were looking for:

a date range has 2 dates, one at either end

Presuming you know how to use datepicker widget to retrieve a single date from the user, the simplest approach would be to just instantiate 2 datepickers in your view and use the 2 dates sent back to your controller as the edges of the date range in your model.

Upvotes: 0

Andrzej Ośmiałowski
Andrzej Ośmiałowski

Reputation: 1504

Please follow jQuery UI documentation to learn how to create date range.

After reading jQuery UI docs you should understand how does it works. Then you can use CJuiDatePicker widget to generate what you need.

It's not hard to adjust Yii widgets to your needs, I'd rather say it's very simple and efficient.

Upvotes: 0

Related Questions