What problem does it solve? Selecting and validating date ranges in React apps requires handling start/end date state, min/max constraints, formatting, presets, and popup behavior. This Skill provides complete implementation guidance for the Syncfusion React DateRangePicker so you can wire up booking forms, reporting filters, and scheduling UIs without digging through scattered API docs. ## Core Features & Use Cases - Date Range Selection & Validation: Configure startDate/endDate, min/max bounds, minDays/maxDays span limits, strictMode, and preset ranges like Last 7 Days or This Month. - Formatting & Localization: Control display formats (M/d/yyyy, dd-MMM-yyyy), locale-based formatting, custom separators, float labels, and RTL support. - Events, Methods & Styling: Handle change/select/open/close events, call imperative methods (show, hide, getSelectedRange) via refs, and apply themes (Material 3, Bootstrap 5, Fluent, Tailwind) with cssClass customization. - Use Case: Build a hotel booking form that limits stays to 30 days, validates check-in before check-out, integrates with React Hook Form or Formik, and persists the selection to localStorage. ## Quick Start Add a Syncfusion DateRangePicker to my React app with min and max date constraints and log the selected start and end dates on change.
