The Datepicker component provides an interactive calendar interface for selecting single dates or date ranges. Itâs fully integrated with flowbite-svelteâs design system and offers various customization options.
Setup # Default Datepicker #Use the Datepicker for single date selection. The selected date is bound to the value prop.
Enable date range selection using the range prop. The start and end dates are bound to rangeFrom and rangeTo respectively.
Use the inline prop to display the calendar without a popup.
Select one of the following colors for the color prop: primary(default), blue, red, green, yellow, purple, dark, light, alternative, secondary, gray, orange, amber, lime, emerald, teal, cyan, sky, indigo, violet, fuchsia, pink, rose.
The classes prop has the following class for disposal: base, input, titleVariant, polite, button,actionButtons, columnHeader, grid, nav, dayButton, monthButton.
Set a specific locale for date formatting using the locale prop.
Specify a custom date format using the dateFormat prop.
Add action buttons (Today, Clear, Apply) using the showActionButtons prop. You can also listen for the clear and apply events to perform specific actions when these buttons are clicked.
Add a custom title to the Datepicker using the title prop.
Use the disabled prop to disable the Datepicker.
Mark the Datepicker as a required field using the required prop.
Set a custom first day of the week using the firstDayOfWeek prop.
Listen for date selection events using the onselect event.
Use availableFrom and/or availableTo props to restrict the selectable date range.
Set translationLocale to change translation. The following example shows German date format (DD.MM.YYYY) but English text.
The component has the following props, type, and default values. See types page for type information.
References #RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4