Date Picker
premiumCalendar date picker powered by react-day-picker.
Overview
The Date Picker renders a full calendar popup using react-day-picker v9. Users click a trigger input to open the calendar and select a date. Supports min/max date ranges, disabled dates, and locale formatting.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "date" | Field name used in form data. |
label | String | "Date" | Label displayed above the input. |
placeholder | String | "Select a date" | Placeholder text. |
required | Boolean | false | Whether a date must be selected. |
Features
- Full calendar popup with month/year navigation
- Powered by react-day-picker v9 (loaded via ESM CDN)
- Min/max date range support
- Inline CSS (no external stylesheet needed)
- Hidden input for native form submission
Tips
The calendar CSS is injected inline since Framer can't import CSS files.
Uses Framer's React instance via ?external=react to avoid duplicate React errors.
Validation
This component uses text validation. See the Validation Guide for details on configuring rules and error messages.