---
title: "Date Picker"
slug: "date-picker-1"
updated: 2026-01-21T14:44:51Z
published: 2026-01-21T14:44:51Z
canonical: "docs.sightmachine.com/date-picker-1"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sightmachine.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```json
 {
  "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.

```plaintext
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.

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

Selecting a specific row and setting the date to absolute.

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