Examples

Modes

United Codes Date Range Picker has three modes:

One field
Two fields
Two fields - alternative

Each mode has extra settings which can be previewed in the Predefined quick picks and settings sections of this demo.

One field

This is the most basic mode in which the plug-in is defined as one field, meaning both dates (start and end) are returned to APEX item separated with - string.

Range of dates

Two fields

In Two fields mode the plug-in requires a reference to another APEX item (text field). After selecting a range of dates, the end date is returned to the specified text field APEX item.

When items don't have values, clicking date to results in showing the date picker for the item representing the start date. When items have values set, clicking date to results in showing the date picker for the item representing the end date - clicking on a date in the calendar starts a new range of dates.

Date from

Date to

Two fields - alternative

The Two fields - alternative mode is similar to the Two fields mode except that clicking on the Date to item results in selecting only the end date of the range. Click on the Date from item, select a range of dates and then click the Date to item. Clicking on a date after the start date results in selecting a new end date.

Date from

Date to

Predefined Quick Picks

Quick pick(s) are defined as a JSON object (Quick pick(s) attribute). JSON object keys represent the available quick pick labels. Each key is defined as an array with two elements - start and end of a predefined range. Start and end dates are instances of the Moment.js JavaScript library. To learn more about Moment.js visit its home page.

Only quick picks

Selecting Settings \ Quick pick(s) and Appearance \ Quick pick(s) without calendar results in showing only the defined quick picks. Users can't select a different range other than the ranges defined by the developer.

Select range of dates

Quick picks with custom selection

Similar to the Only quick picks example but with a Custom range defined to be shown. The custom label allows a user to define their own date range.

Select range of dates

Quick picks with calendars visible

Selecting only Settings > Quick pick(s) results in displaying calendars and quick picks.

Select range of dates

{ 
  'Today': [
    moment(), 
    moment()
  ],
  'Yesterday': [
    moment().subtract(1, 'days'), 
    moment().subtract(1, 'days')
  ],
  'Last 7 Days': [
    moment().subtract(6, 'days'), 
    moment()
  ],
  'Last 30 Days': [
    moment().subtract(29, 'days'), 
    moment()
  ],
  'This Month': [
    moment().startOf('month'), 
    moment().endOf('month')
  ],
  'Last Month': [
     moment().subtract(1, 'month').startOf('month'), 
     moment().subtract(1, 'month').endOf('month')
  ]
}

Settings

Examples are implemented using One field mode. Item settings can be mixed together and used in each mode (One field, Two fields, Two fields - alternative).

Default settings

Default settings of the plug-in. No option is selected.

Example

Auto apply

When this option is selected, the Apply and Cancel buttons are not visible. Selecting a range of dates will automatically set the item(s) value.

Example

Show days of other months

When this option is selected, the plug-in renders starting/ending days of next/previous month.

Example

Single calendar

When this option is selected, the plug-in renders only one month.

Example

Link calendars

When this options is selected, the plug-in renders months one after another. Using navigation arrows results in showing consecutive months.

Example

Show calendar inputs

When this option is selected, the plug-in renders inputs for a date and time picker.

The time picker is rendered when a proper date mask is applied. Different time masks render different elements.

Example

Show month as dropdown

When this option is selected, the plug-in renders month and year names as select lists. Selecting a month or year results in jumping to the selected month / year.

Example

Show week numbers

When this option is selected, the plug-in renders week numbers as the first column in the calendar.

Example

Maximum and minimum date

When this option is selected, the plug-in uses Minimum date and Maximum date attributes to narrow the available range of dates. In this example, Minimum date and Maximum date are defined as +1m and -1m. This means the user can't pick a date before current day - 1 month or after current day+1 month. The attributes can be specified as static dates in YYYY-MM-DD format.

To learn more read the inline help for those attributes

Example

Date limit

When this option is selected, the plug-in uses the Date limit attribute to narrow the range of day to the given number of days. Narrowing the range starts after the user picks the first date.

In this example you can't pick a period longer than 7 days.

Example

Dynamic Action Integration

In this example, you can test the plug-in integration with basic dynamic actions.

In Two fields mode the plug-in supports dynamic dates for the Set vale true action. This means you can set a static date with the proper format (eg. 2016-12-11) or a date depending on the current date (eg. +1w+2d = trunc(SYSDATE)+7+2).

One field mode

Date range

Two fields mode

Date from is an instance of the plug-in and it references the Date to item (text field) via Date to item attribute of the plug-in. The resulting Date to's dynamic action integration is overwritten by the plug-in. Disabling or enabling the item results in the same effect.

Date from

Date to

Positions

United Codes Date Range Picker supports 6 positions for calendars in relation to the APEX item: Top left, Top center, Top right, Bottom left, Bottom center and Bottom right

The position declared in the Display options attribute is preferred. This means that if there is no space (above / below or left / right of the APEX item) for the calendar, the plug-in will try to fit the calendar to the current position and available space. If the plug-in can't find a position which allows all elements to be in-line, then elements will be displayed in a single column one by one.

Up right

Up center

Up left

Down right

Down center

Down left

Component Settings

Component settings can be changed in Shared Components \ Plug-ins \ United Codes Date Range Picker \ Component Settings.

First day

Default value is 1.

Use this attribute to determine which day of the week should be rendered as the first day of a week. While default day names are defined as Mo,Tu,We,Th,Fr,Sa,Su, default value 1 refers to Mo. Value 7 refers to Su.

Button classes

Default value is t-Button t-Button--small

Use this attribute to determine what classes will be applied to date picker buttons.

Apply class

Default value is t-Button--hot

Use this attribute to determine what classes will be applied to the Apply button.

Cancel class

Default value is t-Cancel

Use this attribute to determine what classes will be applied to the Cancel button.

Translations

To add new translations (ie. Polish names of days) follow these steps:

Select application
Go to Shared Components \ Globalization \ Text Messages
Click the Create Text Message button
Set new message as:
- Name = UC_DATERANGEPICKER_DAYS
- Language = Polish (pl)
- Text = Nd,Pn,Wt,Śr,Czw,Pt,So
- Click the Create Text Message button
Repeat steps 3 and 4 to add more translated text

UC_DATERANGEPICKER_DAYS

Names of days separated by a coma. Default value is set to Su,Mo,Tu,We,Th,Fr,Sa

UC_DATERANGEPICKER_MONTHS

Names of months separated by a coma. Default value is set to January,February,March,April,May,June,July,August,September, October,November,December

UC_DATERANGEPICKER_APPLYLABEL

Button label used to confirm the selected date range. Default value is set to Apply.

UC_DATERANGEPICKER_CANCELLABEL

Button label used to close the date range picker. Default value is set to Cancel.

UC_DATERANGEPICKER_CUSTOM_RANGE

Label of the quick pick that is used to select a custom date range. Default value is set to Custom.

UC_DATERANGEPICKER_WEEK_LABEL

Header for the week number column. Default value is set to W.

UC - Date Range Picker

Breadcrumbs

Examples

Modes

One field

Two fields

Two fields - alternative

Predefined Quick Picks

Only quick picks

Quick picks with custom selection

Quick picks with calendars visible

Example of quick pick(s) JSON

Settings

Default settings

Auto apply

Show days of other months

Single calendar

Link calendars

Show calendar inputs

Show month as dropdown

Show week numbers

Maximum and minimum date

Date limit

Dynamic Action Integration

One field mode

New

New

Two fields mode

Date from

From buttons

Date to

New

Positions

Component Settings

First day

Button classes

Apply class

Cancel class

Translations

UC_DATERANGEPICKER_DAYS

UC_DATERANGEPICKER_MONTHS

UC_DATERANGEPICKER_APPLYLABEL

UC_DATERANGEPICKER_CANCELLABEL

UC_DATERANGEPICKER_CUSTOM_RANGE

UC_DATERANGEPICKER_WEEK_LABEL