DateTimeRangePicker — pick a start/end range or quick presets

[michaelmagan]

Summary

Range picker with linked calendars, presets, and robust min/max/length validation. Uses useTamboState so the AI can reference the selected range across conversation turns.

---

Tasks

• Define Props + Zod propsSchema:
  • start? (ISO string)
  • end? (ISO string)
  • onChange({ start, end })
  • timezone?
  • presets?[] (array of { label, start, end })
• Intents:
  • selectRange({ start, end }) – sets the date range
  • apply – confirms selection
  • clear – resets to no range
• Inclusive/exclusive end handling; timezone awareness
• Keyboard accessibility; focus trapping in overlay/popover
• Docs + showcase with common presets

---

Acceptance Criteria

• Range validation prevents inverted or too-long ranges with clear error messages
• Preset application announces new range to screen readers
• State persists via useTamboState so follow-up queries work seamlessly

---

Example Flow

Initial render:

User: "Show recent data"

AI-generated quick selections: "Today" | "Last Week" | "Last Month"

[Select a date range...] (calendar picker)

After selection:

User: "What date range did I select?"

[Pallavikumarimdb]

@michaelmagan , I want to work on this, Could you please assign it to me?

[michaelmagan]

sure!

[Mhmd-Ashif]

is this issue still open to contribute ??