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.

Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.