SGDS Datepicker Component Skill

<sgds-datepicker> combines a text input with a calendar dropdown. Users can type a date directly or pick one from the calendar. mode="range" enables two-date selection.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Single date? → mode="single" (default)

Date range? → mode="range"

Pre-set a date? → value="22/12/2023" for single, value="01/01/2024 - 31/01/2024" for range

Restrict selectable dates? → minDate and maxDate (ISO date strings)