viernes, 25 de abril de 2014

Yii CJuiDatePicker rango de fechas en datepicker de jQuery UI

Rango de fechas en el Framework Yii (CJuiDatePicker) usando la librería jQuery UI que trae por defecto este framework PHP, la codificación es similar, en este caso habria que ponerle "js" antes de la palabra function, como se muestra en el ejemplo.

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

Los parámetros son similares que el de JavaScript, como el siguiente código:

<script type="text/javascript">
    $(function() {
        $("#date_from").attr('value', getTodayDate);
        $("#date_from").datepicker({
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            showOn: "button",
            buttonImageOnly: false,
            showAnim: "slideDown",
            dateFormat: "yy-mm-dd",
            onClose: function(selectedDate) {
                $("#date_to").datepicker("option", "minDate", selectedDate);
            }
        });
        $("#date_to").datepicker({
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            showOn: "button",
            buttonImageOnly: false,
            showAnim: "slideDown",
            dateFormat: "yy-mm-dd",
            onClose: function(selectedDate) {
                $("#date_from").datepicker("option", "maxDate", selectedDate);
            }
        });
    });
</script>

Ejemplo en JavaScript pueden verlo aquí: http://jsfiddle.net/wimarbueno/fpT6q/
Documentación: http://www.yiiframework.com/doc/api/1.1/CJuiDatePicker

1 comentario:

  1. I have requested a solution for the problem encountered in similar code. Please take a look at http://stackoverflow.com/questions/36527410/yii2-jui-datepicker-range-not-working

    ResponderEliminar