Date Range Picker

The date range picker component allows the user to click and select any date range.

For a detailed reference of properties that affect date range pickers, see Common Properties and Date Range Picker Properties.


A date range picker component in DGLux5


Video Tutorial: Bind Date Range Picker to Chart

More video tutorials are here.


Date Range Picker Properties

These properties affect the date range picker component. For a guide to using the date range picker component, see Date Range Picker.

Date range pickers are also affected by Common Properties.

Date Range Picker properties
The Date Range Picker properties in the Property Inspector

Value

Value

Value
Returns the currently selected date range in the date range picker using one of the formats listed below.

  • Range: "yyyy-MM-ddThh:mm:ss/yyyy-MM-ddThh:mm:ss"
  • Day: "yyyy-MM-dd", "today", or "yesterday"
  • Week: "yyyy-MM-ddThh:mm:ss/yyyy-MM-ddThh:mm:ss"
  • Month: "yyyy-MM", "thisMonth", or "lastMonth"
  • Year: "yyyy", "thisYear", or "lastYear"
  • Relative: "[current/previous]N[seconds/minutes/hours/days/weeks/months/years]", where N is a number and one element is chosen from each set of square brackets

The Value property
The Value property

Formatted Value

Formatted Value

Formatted Value
Returns a formatted version of the Value property. The format is determined using the Date Format String, Range Delimiter, and Keep Special Value properties.

Changing this property changes the text displayed in this date range component, but it does not change the Value selected.

The Formatted Value property
The Formatted Value property

Next Value

Next Value

Next Value
Returns the next chronological date range after the currently selected date range.

The Next Value property
The Next Value property

This Value

This Value

This Value
Returns the currently selected date range.

The This Value property
The This Value property

Previous Value

Previous Value

Previous Value
Returns the previous chronological date range before the currently selected date range.

The Previous Value property
The Previous Value property

Input Mode

Input Mode

Input Mode
Sets or returns the currently selected input mode. The user can select from enabled input modes in a pop-up dialog. To enable and disable input modes in the Property Inspector, toggle the input mode properties, such as Show Range and Show Day.

Range
The user can specify a start date and end date using two calendars. If Show Full Time is enabled, the user can also specify a start time and end time using 24-hour time.

Day
The user can specify one day using a calendar, or specify today or yesterday using buttons.

Week
The user can specify one week using a calendar, or specify this week and last week using buttons. Clicking any date selects a week that includes that date. A week starts on a Sunday and ends on a Saturday.

Month
The user can specify a month and year using drop-down menus, or specify this month or last month using buttons.

Year
The user can specify one of the past ten years, using a drop-down menu, or specify this year and last year using buttons.

Relative
The user can specify a range relative to the current date and time. The user is prompted to enter a number of seconds, minutes, hours, days, weeks, months, or years, and to specify either "current" or "previous." A "current" range begins at the start of the unit; for example, if the current time is 3:26, the "current hour" is the hour from 3:00 to 4:00, and the "current two hours" is the period from 2:00 to 4:00. A "previous" range immediately precedes the current one. For example, if the time is 3:26, the "previous hour" is the hour from 2:00 to 3:00.

The Input Mode property
The Input Mode property

Date Format String

Date Format String

Date Format String
Defines the date format used by the component, as a date format string—for example, “yyyy-MM-ddTHH:mm:ss”. See date formatting help here.

The Date Format String property
The Date Format String property

Range Delimiter

Range Delimiter

Range Delimiter
Specifies the delimiter used between the start date and end date of the range.

The Range Delimiter property
The Range Delimiter property

Keep Special Value

Keep Special Value

Keep Special Value
Specifies how formatting is determined for the Formatted Value, Next Value, and Previous Value properties.

Keep Special Value Formatting
The Keep Special Value property specifies how formatting is determined for the Formatted Value, Next Value, and Previous Value properties. There are four choices for this property: None, Raw, Formatted, and Format Clean.

None

  • If Date Format String is null, the behavior of None is the same as the behavior of Raw.
  • If Date Format String is not null, Formatted Value, Next Value, and Previous Value are formatted as two instances of the Date Format String, separated by the Range Delimiter.

Raw

  • If the "Today," "Yesterday," "This Week," "Last Week," "This Month," "Last Month," "This Year," or "Last Year" button is clicked, the Formatted Value is one of the following special strings: "today", "yesterday", "thisWeek", "lastWeek", "thisMonth", "lastMonth", "thisYear", "lastYear".
  • Otherwise, the behavior of Raw is the same as the behavior of Formatted.

Formatted

  • Range input: If Date Format String is null, the Formatted Value uses "yyyy-MM-ddThh:mm:ss/yyyy-MM-ddThh:mm:ss". Otherwise, the Formatted Value uses two instances of the Date Format String separated by the Range Delimiter. The Next Value and Previous Value use "yyyy-MM-ddThh:mm:ss/yyyy-MM-ddThh:mm:ss".
  • Day input: If Date Format String is null, the Formatted Value uses "yyyy-MM-dd". If Date Format String is not null, and the Today or Yesterday button is clicked, the Formatted Value uses the entire Date Format String for midnight on the specified date. Otherwise, the Formatted Value uses the two instances of the Date Format String separated by the Range Delimiter. The Next Value and Previous Value use either "today", "yesterday", or "yyyy-MM-dd".
  • Week input: If Date Format String is null, the Formatted Value uses "thisWeek", "lastWeek", or "yyyy-MM-ddThh:mm:ss/yyyy-MM-ddThh:mm:ss". If Date Format String is not null, the Formatted Value uses two instances of the Date Format String separated by the Range Delimiter. The Next Value and Previous Value use either "thisWeek", "lastWeek", or "yyyy-MM-ddThh:mm:ss/yyyy-MM-ddThh:mm:ss".
  • Month input: If Date Format String is null, the Formatted value uses "yyyy-MM". If Date Format String is not null, and the This Month or Last Month button is clicked, the Formatted Value uses the entire Date Format String for midnight on the first day of the specified month. Otherwise, the Formatted Value uses two instances of the Date Format String separated by the Range Delimiter. The Next Value and Previous Value use either "yyyy-MM", "thisMonth", or "lastMonth".
  • Year input: If Date Format String is null, the Formatted Value uses "yyyy". If Date Format String is not null, and the This Year or Last Year button is clicked, the Formatted Value uses the entire Date Format String for midnight on the first day of the specified year. Otherwise, the Formatted Value uses two instances of the Date Format String separated by the Range Delimiter. The Next Value and Previous Value use either "yyyy", "thisYear", or "nextYear".
  • Relative input: If Date Format String is null, the Formatted value uses the format "[current/previous]N[seconds/minutes/hours/days/weeks/months/years]", where N is a number and one element is chosen from each set of square brackets. Otherwise, the Formatted Value uses two instances of the Date Format String separated by the Range Delimiter. The Next Value and Previous value use either "[current/previous]N[seconds/minutes/hours/days/weeks/months/years]" or "yyyy-MM-ddThh:mm:ss/yyyy-MM-ddThh:mm:ss".

Format Clean

  • Range input: The behavior of range input for Formatted Clean is the same as the behavior for Formatted.
  • Day input: If Date Format String is not null, and the Today or Yesterday button is clicked, the Formatted Value uses the Date Format String, with any time information removed. Otherwise, the behavior of day input for Formatted Clean is the same as the behavior for Formatted.
  • Week input: The behavior of week input for Formatted Clean is the same as the behavior for Formatted.
  • Month input: If Date Format String is not null, and the This Month or Last Month button is clicked, the Formatted Value uses the Date Format String, with any time and day information removed. Otherwise, the behavior of month input for Formatted Clean is the same as the behavior for Formatted.
  • Year input: If Date Format String is not null, and the This Year or Last Year button is clicked, the Formatted Value uses only the year portion of the Date Format String. Otherwise, the behavior of year input for Formatted Clean is the same as the behavior for Formatted.
  • Relative input: The behavior of relative input for Formatted Clean is the same as the behavior for Formatted.

The Keep Special Value property
The Keep Special Value property

Duration

Duration

Duration
The duration of the currently selected date range, in milliseconds.

The Duration property
The Duration property

Next

Next

Next
Changes the currently selected value to the next chronological value. For example, if January 2016 is selected, this action changes the selection to February 2016.

The Next property
The Next property

Previous

Previous

Previous
Changes the currently selected value to the previous chronological value. For example, if January 2016 is selected, this action changes the selection to December 2015.

The Previous property
The Previous property

Show Day

Show Day

Show Day
Specifies whether this date range picker includes an option to choose a day.

The Show Day property
The Show Day property

Show Week

Show Week

Show Week
Specifies whether this date range picker includes an option to choose a week beginning on Sunday and ending on Saturday.

The Show Week property
The Show Week property

Show Relative

Show Relative

Show Relative
Specifies whether this date range picker includes an option to choose a date range relative to the current date.

The Show Relative property
The Show Relative property

Show Month

Show Month

Show Month
Specifies whether this date range picker includes an option to choose a calendar month.

The Show Month property
The Show Month property

Show Year

Show Year

Show Year
Specifies whether this date range picker includes an option to choose a calendar year.

The Show Year property
The Show Year property

Show Range

Show Range

Show Range
Specifies whether this date range picker includes an option to choose a starting date/time and ending date/time.

The Show Range property
The Show Range property

Show Full Time

Show Full Time

Show Full Time
Determines whether the Range portion of the date range picker includes time.

TRUE
The date range picker can specify start and end times, as well as start and end dates.

FALSE
The date range picker can specify start and end dates only.

The Show Full Time property
The Show Full Time property

Dialog Background

Dialog Background

Dialog Background
Defines the background color for the daterange picker dialog.

The Dialog Background property
The Dialog Background property

Button Font

Button Font

Button Font
Defines the font for buttons within this date range picker. To add a font to this project and use it for this property, see Text Component Properties.

The Button Font property
The Button Font property

Button Font Size

Button Font Size

Button Font Size
Defines the font size for buttons within this date range picker.

The Button Font Size property
The Button Font Size property

Button Background

Button Background

Button Background
Defines the fill for buttons within this date range picker that are not currently active (selected) or moused-over.

The Button Background property
The Button Background property

Button Background (Active)

Button Background (Active)

Button Background (Active)
Defines the fill for active (selected) buttons within this date range picker.

The Button Background (Active) property
The Button Background (Active) property

Button Background (Hover)

Button Background (Hover)

Button Background (Hover)
Defines the fill for moused-over buttons within this date range picker.

The Button Background (Hover) property
The Button Background (Hover) property

Button Border

Button Border

Button Border
Defines the border color for all buttons within this date range picker.

The Button Border property
The Button Border property

2019/07/17 19:17