DateRangePicker

Get started #

DateRangePicker helps us to pick a range of dates.

<?php
DateRangePicker::create(array(
    "name"=>"dateRange",
));
?>

Set locale #

DateRangePicker has ability to set locale:

<?php
DateRangePicker::create(array(
    "name"=>"dateRange",
    "locale"=>"en-us",
));
?>

Set format date #

We can set the display format of DateRangePicker

<?php
DateRangePicker::create(array(
    "name"=>"dateRange",
    "format"=>"MMM Do, YYYY", //Jul 3rd, 2017
));
?>

The full input of format can be found here:

TokenOutput
MonthM1 2 ... 11 12
Mo1st 2nd ... 11th 12th
MM01 02 ... 11 12
MMMJan Feb ... Nov Dec
MMMMJanuary February ... November December
QuarterQ1 2 3 4
Qo1 2 3 4
Day of MonthD1 2 ... 30 31
Do1 2 ... 30 31
DD01 02 ... 30 31
Day of YearDDD1 2 ... 364 365
DDDo1st 2nd ... 364th 365th
DDDD001 002 ... 364 365
Day of Weekd0 1 ... 5 6
do0th 1st ... 5th 6th
ddSu Mo ... Fr Sa
dddSun Mon ... Fri Sat
ddddSunday Monday ... Friday Saturday
Day of Week (Locale)e0 1 ... 5 6
Day of Week (ISO)E1 2 ... 6 7
Week of Yearw1 2 ... 52 53
wo1st 2nd ... 52nd 53rd
ww01 02 ... 52 53
Week of Year (ISO)W1 2 ... 52 53
Week of Yearw1 2 ... 52 53
wo1st 2nd ... 52nd 53rd
ww01 02 ... 52 53
YearYY70 71 ... 29 30
YYYY1970 1971 ... 2029 2030
Y1970 1971 ... 9999 +10000 +10001
Week Yeargg70 71 ... 29 30
gggg1970 1971 ... 2029 2030
Week Year (ISO)GG70 71 ... 29 30
GGGG1970 1971 ... 2029 2030
AM/PMAAM PM
aam pm
HourH0 1 ... 22 23
HH00 01 ... 22 23
h1 2 ... 11 12
hh01 02 ... 11 12
k1 2 ... 23 24
kk01 02 ... 23 24
Minutem0 1 ... 58 59
mm00 01 ... 58 59
Seconds0 1 ... 58 59
ss00 01 ... 58 59
Fractional SecondS0 1 ... 8 9
SS00 01 ... 98 99
SSS000 001 ... 998 999
Time Zonez or zzEST CST ... MST PST
Z-07:00 -06:00 ... +06:00 +07:00
ZZ-0700 -0600 ... +0600 +0700
Unix TimestampX1360013296
Unix Millisecond Timestampx1360013296123

Set ranges #

<?php
DateRangePicker::create(array(
    "name"=>"dateRange",
    "format"=>"MMM Do, YYYY", //Jul 3rd, 2017
    "ranges"=>array(
        "Today"=>DateRangePicker::today(),
        "Yesterday"=>DateRangePicker::yesterday(),
        "Last 7 days"=>DateRangePicker::last7days(),
        "Last 30 days"=>DateRangePicker::last30days(),
        "This month"=>DateRangePicker::thisMonth(),
        "Last month"=>DateRangePicker::lastMonth(),
    )
));
?>

Above are all of ranges that DateRangePicker supports. You can create custom function to return custom startDate and endDate.

Client Events #

DateRangePicker supports below events

nameparametersdescription
hidee={date}Fired when the widget is hidden.
showFired when the widget is shown.
changee={date,oldDate}Fired when the date is changed.
errore={date}Fired when a selected date fails to pass validation.
updatee={change,viewDate}Fired (in most cases) when the viewDate changes. E.g. Next and Previous buttons, selecting a year.
<?php
DateRangePicker::create(array(
    ...
    "clientEvents"=>array(
        "change"=>"function(e){
            console.log(e.date);
            console.log(e.oldDate);
        }",
    )
));
?>

Options #

You may set extra options for DateRangePicker with "options" property, for example:

<?php
DateRangePicker::create(array(
    ...
    "options"=>array(
        "showWeekNumbers"=>true
    )
));
?>

Here is the full list of option items that you may set.