Contents x
    Date Picker
      • Print
      • Dark
        Light
      Contents

      Date Picker

        • Print
        • Dark
          Light
        Article summary

        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'] }",
  }
}

        What's Next