Giter VIP home page Giter VIP logo

daterangepicker's Introduction

About

Bootstrap Date Range Picker widget for Yii 2 Framework

It is actually a Yii 2 wrapper for famous https://github.com/dangrossman/bootstrap-daterangepicker extension.

This widget uses 3.0 Bootstrap CSS since Bootstrap 3.0 is included to Yii 2 as extension.

To learn more details about options JS please visit read ://github.com/dangrossman/bootstrap-daterangepicker documentation.

Usage Example

// Include namespace
use bburim\daterangepicker\DateRangePicker as DateRangePicker;

// 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;',
		]
	]);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.