Date Picker

The Date Picker component is a styled trigger-based calendar popup that allows users to select single dates, ranges, or use predefined presets. It’s designed for use cases like filtering by date, setting a timeframe, or scheduling actions — all while keeping the UI clean and compact.

This component is made up of:

• Trigger Button – the interactive element that opens the calendar
• Popover – a floating container that displays the calendar when triggered
• Calendar Component – embedded inside the popover for date selection

Usage

1. Drag the Date Picker component onto the canvas.
2. Customize the trigger button label via the Component Properties panel.
3. Integrate with your logic or external libraries to capture and use the selected dates.

This setup keeps the calendar hidden until needed, helping you preserve space while offering powerful date selection functionality.