hiqdev/yii2-daterangepicker

Date Range Picker widget for Yii2

dev-master 2024-04-03 16:05 UTC

Requires

• bower-asset/bootstrap-daterangepicker: ^2.1 || ^3.0.1
• yiisoft/yii2: *

Requires (Dev)

• hiqdev/hidev-hiqdev: dev-master
• hiqdev/hidev-php: dev-master
• omnilight/yii2-momentjs: *

BSD-3-Clause

• Andrii Vasyliev
• Dmitry Naumenko
• Andrey Klochok
• Yuriy Myronchuk

• widget
• yii2
• daterangepicker

README

Date Range Picker widget for Yii2

This widget renders a DateRangePicker input control using Bootstrap Date Range Picker widget.

Installation

The preferred way to install this yii2-extension is through composer.

Either run

php composer.phar require "hiqdev/yii2-daterangepicker"

or add

"hiqdev/yii2-daterangepicker": "*"

to the require section of your composer.json.

Usage

There are two ways of using this widget: with an ActiveForm instance or as a widget setting up its model and attribute. Additional options could be passed in 'clientOptions' array.

With an ActiveForm

<?php
use hipanel\widgets\DatePicker;
...
$this->pickerOptions = ArrayHelper::merge([
    'class' => DateRangePicker::class,
    'name' => '',
    'options' => [
        'tag' => false,
        'id' => "{$id}-period-btn",
    ],
    'clientEvents' => [
        'apply.daterangepicker' => new JsExpression(/** @lang JavaScript */"
            function (event, picker) {
                var form = $(picker.element[0]).closest('form');
                var span = form.find('#{$id}-period-btn span');

                span.text(picker.startDate.format('ll') + ' - ' + picker.endDate.format('ll'));

                form.find('input[name=from]').val(picker.startDate.format());
                form.find('input[name=till]').val(picker.endDate.format());
                form.trigger('change.updateChart');
            }
        "),
        'cancel.daterangepicker' => new JsExpression(/** @lang JavaScript */"
            function (event, picker) {
                var form = $(event.element[0]).closest('form');
                var span = form.find('#{$id}-period-btn span');

                span.text(span.data('prompt'));

                form.find('input[name=from]').val('');
                form.find('input[name=till]').val('');
                form.trigger('change.updateChart');
            }
        "),
    ],
    'clientOptions' => [
        'ranges' => [
            Yii::t('hipanel', 'Current Month') => new JsExpression('[moment().startOf("month"), new Date()]'),
            Yii::t('hipanel', 'Previous Month') => new JsExpression('[moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]'),
            Yii::t('hipanel', 'Last 3 months') => new JsExpression('[moment().subtract(3, "month").startOf("month"), new Date()]'),
            Yii::t('hipanel', 'Last year') => new JsExpression('[moment().subtract(1, "year").startOf("year"), new Date()]'),
        ],
    ],
], $this->pickerOptions);
...
?>

As a widget

<?php
use hipanel\widgets\DatePicker;
?>

<?= DateRangePicker::widget([
    'model' => $search->model,
    'attribute' => 'create_from',
    'attribute2' => 'create_till',
    'options' => [
        'class' => 'form-control',
    ],
    'dateFormat' => 'yyyy-MM-dd',
]) ?>

License

This project is released under the terms of the BSD-3-Clause license. Read more here.

Copyright © 2018, HiQDev (http://hiqdev.com/)

Acknowledgments

This package is based on omnilight/yii2-bootstrap-daterangepicker.