Prop	Type	Required	Default	Description
modelValue	string \| null	Yes	-	Selected date in YYYY-MM-DD format
alwaysOpen	boolean	No	false	Keeps the date picker always visible
locale	en-US \| pt-BR	No	en-US	Locale for month and day names
disabledDates	string[]	No	[]	Array of disabled dates in YYYY-MM-DD format
disabledRange	{ start: string, end: string }	No	undefined	Range of disabled dates
disabled	boolean	No	false	Disable input

Events

Event	Description	Payload
update:modelValue	Emits when a date is selected	string \| null

Styling

Base styling with Tailwind:

.datepicker-input {
  @apply w-full p-2 border-2 border-primary-light-500 
        rounded-lg shadow-md shadow-primary-light-500/20;
}

.datepicker-header {
  @apply flex justify-between items-center font-bold mb-2;
}

.datepicker-days button {
  @apply border-none bg-none p-1 cursor-pointer rounded;
}

.datepicker-days button.selected {
  @apply bg-primary-light-500 text-white;
}

Customizable classes:

.datepicker-container {
  @apply bg-white p-4 rounded-lg shadow-lg;
}

.datepicker-weekdays {
  @apply grid grid-cols-7 text-center font-medium;
}

Features

Multiple locale support (en-US, pt-BR)
Disabled dates and date ranges
Keyboard navigation
Accessible markup
Customizable styling
Always open mode

Dependencies

PUTooltip for popup positioning
PUIcon for navigation arrows
Tailwind CSS for styling