marekpetras/daterangepicker

为 Yii 2 框架的 Bootstrap 日期范围选择器小部件

安装次数: 295

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 4

开放问题: 0

语言:HTML

类型:yii2-extension

dev-master 2016-08-23 03:58 UTC

This package is auto-updated.

Last update: 2024-09-07 17:08:11 UTC


README

从过时的 https://github.com/bburim/daterangepicker 分支而来

为 Yii 2 框架的 Bootstrap 日期范围选择器小部件

实际上是一个为著名的 https://github.com/dangrossman/bootstrap-daterangepicker 扩展创建的 Yii 2 包装器。

该小部件使用 3.0 Bootstrap CSS,因为 Bootstrap 3.0 已经作为扩展包含在 Yii 2 中。

要了解更多关于选项 JS 的详细信息,请访问://github.com/dangrossman/bootstrap-daterangepicker 文档。

使用示例

// You can just use the defaults and only run the widget
echo marekpetras\daterangepicker\DateRangePicker::widget();

// this will render the date range picker with defaults (see code) and two hidden html inputs which are updated on change and then submitted with the form



// or specify more options
use marekpetras\daterangepicker\DateRangePicker as DateRangePicker;
// Include namespace

// Define  ranges correctly
$ranges = new \yii\web\JsExpression("{
                    'Today'        : [Date.today(), Date.today()],
                    'Yesterday'    : [Date.today().add({ days: -1 }), Date.today().add({ days: -1 })],
                    'Last 7 Days'  : [Date.today().add({ days: -6 }), Date.today()],
                    'Last 30 Days' : [Date.today().add({ days: -29 }), Date.today()],
                    'This Month'   : [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()],
                    'This Year'    : [Date.today().moveToMonth(0,-1).moveToFirstDayOfMonth(), Date.today()],
                    'Last Month'   : [Date.today().moveToFirstDayOfMonth().add({ months: -1 }), Date.today().moveToFirstDayOfMonth().add({ days: -1 })]
                }");

// Define empty callback fust for fun
$callback = new \yii\web\JsExpression("function(){}");

// Provide required parameters and render the widget
  echo DateRangePicker::widget([
        'callback' => $callback,
        'options'  => [
           'ranges' => $ranges,
           'locale' => [
            'firstDay' => 1
           ]
        ],
        'htmlOptions' => [
        'name'        => 'daterange',
        'class'       => 'form-control',
        'placeholder' => 'Select Date Range',
        'style'       => 'width:190px;',
        ]
    ]);