如何将 jquery-datepicker 用于日期范围答案

【问题标题】：How to use jquery-datepicker for date range如何将 jquery-datepicker 用于日期范围
【发布时间】：2011-07-09 00:48:13
【问题描述】：

谁能告诉我如何在 yii 中使用 jquery-datepicker 来获取日期范围？我让它在一个日期工作我如何修改它以获得多个日期。我是 yii 框架的新手。

【问题讨论】：

标签： yii jquery-ui-datepicker

【解决方案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',
    ),
)); ?>

【讨论】：

【解决方案2】：

我没有找到使用 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 替换为您自己的元素 ID。

【讨论】：

【解决方案3】：

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

【讨论】：

对你的代码给出一些解释/背景。这只是一堆代码
除了@jamband 的回答之外还有什么？

【解决方案4】：

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

【讨论】：

【解决方案5】：

请按照jQuery UI 文档了解如何创建日期范围。

阅读 jQuery UI 文档后，您应该了解它是如何工作的。然后你可以使用CJuiDatePicker 小部件来生成你需要的东西。

根据您的需要调整 Yii 小部件并不难，我宁愿说它非常简单高效。

【讨论】：

【解决方案6】：

也许这就是你要找的线索：

一个日期范围有 2 个日期，两端各有一个

假设您知道如何使用 datepicker 小部件从用户那里检索单个日期，最简单的方法是在您的视图中实例化 2 个日期选择器，并将发送回控制器的 2 个日期用作模型中的日期范围。

【讨论】：

【解决方案7】：

您可以在选项上添加“yearRange”。你可以用'开始日期：结束日期'填充它，例如'yearRange'=>'2008:2018'，或者，今年前后多少年，用-和+写代码，例如'yearRange'=>'-8:+8'，表示今年前8年，后8年。

【讨论】：

【解决方案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); }',
           )
       ));
?>

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

【讨论】：