Date Picker

The Date Picker is a versatile tool that allows users to select dates and times with timezone support. It includes features such as:

Relative mode for selecting dates relative to the current date
Calendar selection for picking specific dates
Relative shortcuts for quick date selection
Timezone selection to accommodate different time zones
Production date handling for managing production schedules

Configuration Options

The picker can be configured through the following options:

Option	Type	Default	Description	Options
`config.mode`	string	`relative`	The default mode of the date picker.	`"relative"`, `"absolute"`
`config.selectableRelativeUnits`	string[]	`['day', 'week', 'month']`	The units available for relative selection. (i.e. Last 7 Days)	`"minute"`, `"hour"`, `"day"`, `"week"`, `"month"`, `"year"`
`config.showLiveToggle`	boolean	true	Show/hide toggle for switching between relative and absolute mode.
`config.showRelativePicker`	boolean	true	Show/hide relative picker.
`config.enableTimeSelection`	boolean	true	Enable/Disable time in absolute mode.
`config.showQuarterShortcuts`	boolean	false	Show/hide relative quarter shortcuts.
`config.disableTimeZoneSelection`	boolean	false	Show/hide time zone selection.
`config.verboseQuery`	boolean	false	If true, extra parameters will be passed to the UDF
`value.relativeAmount`	number	7	The default relative value to use.
`value.relativeUnit`	string	`day`	The default unit of time for the relativeAmount.	`"minute"`, `"hour"`, `"day"`, `"week"`, `"month"`, `"year"`
`value.selectedTimeZone`	string	user local time	The selected time zone.	any IANA Timezones e.g. `"America/New_York"`
`value.selectedShortcut`	any	null	The selected shortcut, if any.	`"TODAY"`, `"YESTERDAY"`, `"THIS_SHIFT"`, `"LAST_SHIFT"`, `"THIS_WEEK"`, `"LAST_WEEK"`, `"THIS_MONTH"`, `"LAST_MONTH"`, `"THIS_PERIOD"`, `"LAST_PERIOD"`, `"THIS_QUARTER"`, `"LAST_QUARTER"`, `"THIS_YEAR"`, `"LAST_YEAR"`
`value.timeType`	string	`calendar`	The default timeType selection.	`"calendar"`, `"production"`

Basic Example:

 {
  "config": {
    "enableTimeTypeSelection": true,
    "mode": "relative",
    "selectableRelativeUnits": [
      "minute",
      "hour",
      "day"
    ]
  },
  "id": "dateRange",
  "title": "Date Range",
  "type": "date",
  "value": {
    "relativeAmount": 7,
    "relativeUnit": "day"
  }
}

Default Query Params

To make it easier for the BUILD developer, the date picker user selection is pre-processed to determine the start_date and end_date. These values are passed into the UDF (Python):

Parameter	Type	Description
`start_date`	string	The start date
`end_date`	string	The end date
`mode`	string	The mode of the date picker. (`relative`, `absolute`)
`timeType`	string	The type of time selection. (`calendar`, `production`)
`selectedShortcut`	string	The selected shortcut i.e. (`LAST_WEEK`)
`selectedTimeZone`	string	The selected timezone i.e. `America/New_York`
`productionTimeZone`	string	The time zone for production dates.
`currentProductionDay`	string	The current production day.

In most simple cases the start_date and end_date should be sufficient to write the WHERE clause in the SQL query. i.e.

WHERE "Cycle End Time" >= :start_date AND "Cycle End Time" < :end_datea

To handle more complex requirements like production days please see the Date Handling Guide for more help.

Page Link

Example mapping for setting specific dateRange on page link.

Making the selected range to a specific relative range.

{
  "mapping": {
    "dateRange": "{...dateRange, mode: 'relative', 'relativeAmount': 7, relativeUnit: 'day' }", 
  }
}

Selecting a specific row and setting the date to absolute.

{
  "mapping": {
    "dateRange": "{mode: 'absolute', startDate: row['Cycle Start Time'], endDate: row['Cycle End Time'] }",
  }
}