Date Range Picker widget for Yii2
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs/readme
src
tests
.gitignore
.php_cs
.scrutinizer.yml
.travis.yml
LICENSE
README.md
composer.json
hidev.yml
phpunit.xml.dist

README.md

Yii2 Date Range Picker

Date Range Picker widget for Yii2

Latest Stable Version Total Downloads Build Status Scrutinizer Code Coverage Scrutinizer Code Quality Dependency Status

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.