Widget Tricks - Dates

‘Last three months’ default selection

The default start date is set to now minus 3 months, and the default end date is set to now. (MM/DD/YYYY format)

Compute the range date size (in days or hours etc…)

Get the number of hours, days, months or any units you’d like between the from and to selection.

Filter on two different date fields (start and end date)

This example uses the ods-timerange widget to set from and to date, and then filters an events dataset on two different fields.

This is particuarily useful for events datasets with a beginning date of the event and an end date. The timerange selection helps the user to provide his availability, and the result displays events available on this selected period.

Select current, past or next week

This is an extract of the school canteen menu app

Single date picker + range slider

This example highlights two usages. The ability to have a single date picker instead of two usually. But also the use of sliders to play with date ranges.

This combination is pretty useful to facilitate range selection for the end user.