Date Picker

A date and/or time selection control. Stores a .string value (ISO 8601 format).

Type

"datePicker"

Relevant Fields

Inherits all Control Definition. Key fields:

Field Type Default Description
datePickerStyle string "compact" "compact", "wheel", "graphical"
datePickerMode string "dateAndTime" "date", "time", "dateAndTime"
dateMin string — Minimum date (ISO 8601)
dateMax string — Maximum date (ISO 8601)
label string — Display label
tint string "#667eea" Accent color
defaultValue string — Initial ISO 8601 date string
haptic string "selection" Default haptic on change

Styles

Value Description
"compact" Inline date display that expands on tap (default)
"wheel" Spinning wheel picker
"graphical" Calendar view for date selection

Modes

Value Components
"date" Date only
"time" Time only
"dateAndTime" Both date and time

Examples

Schedule time picker

{
  "type": "datePicker",
  "id": "alarm-time",
  "position": [0, 0],
  "span": [1, 2],
  "datePickerMode": "time",
  "datePickerStyle": "compact",
  "label": "Wake Up",
  "action": { "method": "meshsocket", "mode": "request", "event": "set_alarm", "payload": { "time": "{{value}}" } }
}

Date range picker with bounds

{
  "type": "datePicker",
  "id": "vacation-start",
  "position": [0, 0],
  "span": [2, 4],
  "datePickerMode": "date",
  "datePickerStyle": "graphical",
  "label": "Start Date",
  "dateMin": "2026-01-01T00:00:00Z",
  "dateMax": "2026-12-31T23:59:59Z"
}

Notes

  • Value is always transmitted as ISO 8601 string (e.g., "2026-06-04T15:30:00Z")
  • The {{value}} substitution in actions outputs the ISO string