Datepicker showcase Datepicker showcase

 

StartDate jQueryUI StartDate jQueryUI

Force custom format mm-dd-yyyy Force custom format mm-dd-yyyy

Multiple months Multiple months

Browser native Browser native

EndDate >= StartDate EndDate >= StartDate

BIRT report BIRT report

Loading...
class="vui-aui-tooltip"
Your document is available

Loading...

Extended configuration for Datepickers

A report parameter with a "Date" data-type is displayed by default in a jquery UI datepicker such below. 

Preferences

We can set an extended configuration for each parameter with portal preferences: 

   =>  

jQuery UI widget

  • All datepicker options can be customized from your portal UI! Please refer to this link for more informations about available options. 

Example 1:

This extended config allows to enter a date between the last 3 years and the current day. We take advantage of date formats expressions provided by jqueryUI:

{"minDate":"-3Y","maxDate":"+0d"}

Example 2:

This extended config allows to enter a date between the last 3 years and the last day of the previous month. In order to compute this maxDate, jqueryUI allows to substract the day number of the current month with a javascript expression such:

{"minDate":"-3Y","maxDate":"-(new Date().getDate())"}

Example 3:

This extended config allows to enter a date between the last 5 years and the last week. Additionnally we want to display 2 months at a time:

{"minDate":"-5Y","maxDate":"-1w","numberOfMonths":2}

Select a date range

  • In addition to jquery UI options we can also connect two datepicker parameters with "minDateOf" and "maxDateOf" options, in order to select a date range! Thus, users can't select an "end date" lower than a "start date".

It could not be easier, let's assume we have 2 date parameters StartDate & EndDate in a birt report :

  • StartDate parameter is linked to EndDate in extended config:  {"minDateOf":"EndDate"}
  • EndDate parameter is linked to StartDate in extended config:  {"maxDateOf":"StartDate"}
  • See this example in action here!

Example:

This extended config allows to enter a date between the current day and the last 5 years, and prevents users to select a date lower than the current value of "StartDate" parameter

{"minDate":"-5Y","maxDate":"+0Y","maxDateOf":"StartDate"}

Native html5 

  • If you selected "native" as display type, html5 attributes can be used in the extended configuration.

In particular "min" and "max" attributes can be controlled with dynamic expressions, although as you can see below it is not as simple as it is with a jquery UI widget.

Example:

This extended config allows to enter a date between the current day and the last 4 years. 

{"max":"$vui.datepicker.formatDate(\"yy-mm-dd\",new Date())",
"min":"var d = new Date(); d.setDate(d.getDate()-4*365);$vui.datepicker.formatDate(\"yy-mm-dd\",d)"}