Date Range
Component Palette Icon:
The date range component provides an intuitive, drag-and-drop way to select a contiguous range of time. The user is shown a timeline and can drag or stretch the selection box around on the timeline. The selected range is always a whole number of units, where the unit is determined by the current zoom level.
Note: The Start/End dates and Outer Start/End dates will be ignored when the window opens unless the Startup Mode property is set to "None."
Data Density Histogram
As an advanced optional feature, the date range can display a data density histogram inside the timeline. This is useful for historical data with gaps in it, so that the end user isn't hunting for data. (Tip: this is also great for demos, to make it easy to find historical data in a database that isn't being continuously updated).
To use this feature, bind the Data Density dataset to a query that returns just the timestamps of the target table. These timestamps will be used to fill in the histogram behind the timeline. You can use the Outer Range Start Date and Outer Range End Date properties in your query to limit the overall return size for the query. Note: timestamps must be ordered by date (ascending) to display correctly.
Name |
Description |
Property Type |
Scripting |
Category |
Antialias |
Draw with antialias on? Makes text smoother |
boolean |
.antialias |
Appearance |
Background Color |
The background color of the component. |
Color |
.background |
Appearance |
Border |
The border surrounding this component. NOTE that the border is unaffected by rotation. |
Border |
.border |
Common |
Box Fill |
The fill color for the selection box. |
Color |
.boxFill |
Appearance |
Cursor |
The mouse cursor to use when hovering over this component. |
int |
.cursorCode |
Common |
Data Density |
A dataset that is used to calculate a histogram of data density |
Dataset |
.densityData |
Data |
Data Quality |
The data quality code for any tag bindings on this component. |
int |
.dataQuality |
Data |
Date Style |
The style to display dates in. For international support. |
int |
.dateStyle |
Appearance |
Editor Background |
The background color of the textual date range editor portion of this component. |
Color |
.editorBackground |
Appearance |
Enabled |
If disabled, a component cannot be used. |
boolean |
.componentEnabled |
Common |
End Date |
The ending date of the currently selected range. |
Date |
.endDate |
Data |
Font |
Font of text of this component |
Font |
.font |
Appearance |
Foreground Color |
The foreground color of the component. |
Color |
.foreground |
Appearance |
High Density Color |
The color used to indicate high data density. |
Color |
.highDensityColor |
Appearance |
Max Selection |
The maximum size of the selected date range |
String |
.maxSelectionSize |
Behavior |
Mouseover Text |
The text that is displayed in the tooltip which pops up on mouseover of this component. |
String |
.toolTipText |
Common |
Name |
The name of this component. |
String |
.name |
Common |
Opaque |
If false, backgrounds are not drawn. If true, backgrounds are drawn. |
boolean |
.opaque |
Common |
Outer Range End |
The ending date of the available outer range. |
Date |
.outerRangeEndDate |
Data |
Outer Range Start |
The starting date of the available outer range. |
Date |
.outerRangeStartDate |
Data |
Selection Highlight |
The focus highlight color for the selection box |
Color |
.selectionHighlight |
Appearance |
Start Date |
The starting date of the currently selected range. |
Date |
.startDate |
Data |
Startup Mode |
Controls whether or not this date range automatically assigns itself a starting range based on the current time |
int |
.startupMode |
Behavior |
Startup Range |
If startup mode is Automatic, this will be the starting range of time available for selection. |
String |
.startupRange |
Behavior |
Startup Selection |
If startup mode is Automatic, this will be the starting selected range. |
String |
.startupSelection |
Behavior |
Styles |
Contains the component's styles |
Dataset |
.styles |
Appearance |
Tick Density |
This is multiplied by the width to determine the current ideal tick unit. |
float |
.tickDensity |
Behavior |
Time Style |
The style to display times of day. For international support. |
int |
.timeStyle |
Appearance |
Today Color |
The color of the "Today Arrow" indicator |
Color |
.todayIndicatorColor |
Appearance |
Track Margin |
The amount of room on either side of the slider track. May need adjusting of default font is changed. |
int |
.trackMargin |
Appearance |
Visible |
If disabled, the component will be hidden. |
boolean |
.visible |
Common |
.setRange(start, end)
-
Since 7.8.1
-
Description
Sets the selected range. The outer range will move if needed.
Note: the start and end times are determined based on the zoom level and may not move (or may move farther than intended) if the component is zoomed out too far for the amount of change attempted. IE: When days are showing, moving the start time 5 minutes forward will not effect the start, and moving the end time 5 minutes forward will add one day.
-
Parameters
Date start - The starting date for the new selection.
Date end - The ending date for the new selection.
-
Return
Nothing
-
Scope
Client
# This example moves the existing Start Date and End Date
# of a Date Range component ahead 8 hours
from
java.util
import
Calendar
# Get the current start and end
dateRangeComponent
=
event.source.parent.getComponent(
'Date Range'
)
startDate
=
dateRangeComponent.startDate
endDate
=
dateRangeComponent.endDate
# Calculate the new start and end dates
cal
=
Calendar.getInstance();
cal.setTime(startDate);
cal.add(Calendar.HOUR,
-
8
);
newStart
=
cal.getTime();
cal.setTime(endDate);
cal.add(Calendar.HOUR,
-
8
);
newEnd
=
cal.getTime();
# Set the new range for the component. The outer range will
# automatically expand if needed.
dateRangeComponent.setRange(newStart, newEnd)
.setOuterRange(start, end)
-
Since 7.8.1
-
Description
Sets the outer range. The selected range will move if needed.
Note: the start and end times are determined based on the zoom level and may not move (or may move farther than intended) if the component is zoomed out too far for the amount of change attempted. IE: When days are showing, moving the start time 5 minutes forward will not effect the start, and moving the end time 5 minutes forward will add one day.
-
Parameters
Date start - The starting date for the new outer range.
Date end - The ending date for the new outer range.
-
Return
Nothing
-
Scope
Client
# This example moves the existing Outer Date Range
# of a Date Range component back two days
from
java.util
import
Calendar
# Get the current start and end of the outer range
dateRangeComponent
=
event.source.parent.getComponent(
'Date Range'
)
startDate
=
dateRangeComponent.outerRangeStartDate
endDate
=
dateRangeComponent.outerRangeEndDate
# Calculate the new start and end dates for the outer range
cal
=
Calendar.getInstance();
cal.setTime(startDate);
cal.add(Calendar.DAY_OF_MONTH,
2
);
newStart
=
cal.getTime();
cal.setTime(endDate);
cal.add(Calendar.DAY_OF_MONTH,
2
);
newEnd
=
cal.getTime();
# Set the new outer range for the component.
dateRangeComponent.setOuterRange(newStart, newEnd)
This component does not have extension functions associated with it.
mouse
mouseClicked
This event signifies a mouse click on the source component. A mouse click the combination of a mouse press and a mouse release, both of which must have occurred over the source component. Note that this event fires after the pressed and released events have fired.
.source |
The component that fired this event |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseEntered
This event fires when the mouse enters the space over the source component.
.source |
The component that fired this event |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseExited
This event fires when the mouse leaves the space over the source component.
.source |
The component that fired this event |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mousePressed
This event fires when a mouse button is pressed down on the source component.
.source |
The component that fired this event |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseReleased
This event fires when a mouse button is released, if that mouse button's press happened over this component.
.source |
The component that fired this event |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseMotion
mouseDragged
Fires when the mouse moves over a component after a button has been pushed.
.source |
The component that fired this event |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseMoved
Fires when the mouse moves over a component, but no buttons are pushed.
.source |
The component that fired this event |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
propertyChange
propertyChange
Fires whenever a bindable property of the source component changes. This works for standard and custom (dynamic) properties.
.source |
The component that fired this event |
.newValue |
The new value that this property changed to. |
.oldValue |
The value that this property was before it changed. Note that not all components include an accurate oldValue in their events. |
.propertyName |
The name of the property that changed. NOTE: remember to always filter out these events for the property that you are looking for! Components often have many properties that change. |
//A Query binding on another component on the same window might look like this:
SELECT Column1, Column2, Column3
FROM MyTable WHERE
t_stamp >=
"{Root Container.Date Range.startDate}"
AND
t_stamp <=
"{Root Container.Date Range.endDate}"