Shadcn Date Selector Basic Inline

When to use

• Report and list filters on a day, month, quarter, half year or year with is, before, after or between
• Due date fields opened from a button into a popover or dialog and committed on Apply
• Localized pickers with translated months, a regional date format and a Monday first week

When not to use

• A compact field that stays closed until a button opens it: use the Date Selector Popover example
• One day or a from and to span with no period tabs or operators: use the Calendar component
• A date condition sitting beside other field conditions in one query bar: use the Filters component
• A booking flow that pairs a day with time slots and a confirm step: use the Schedule blocks

Agent notes

• The JSON.stringify panel under the Card is a demo readout of value; remove it once value feeds your form
• Period lists run from minYear 2015 to maxYear 2026 by default, so pass a later maxYear to offer next year; yearRange alone changes nothing
• onChange runs on mount and again whenever its identity changes, so pass a stable state setter, never an inline API call
• The text field takes typed input such as 2025, Q4 or a full date only when inputHint is set; without it the field is read only

Third-party API docs

• date-fns v4: docs