@oz_dev/svelty-picker

📆 Svelty Picker

Simple date & time picker implemented in svelte.

Features:

• date/time/datetime/range picker mode
• various formatting options
• keyboard navigation
• replacable slots
• themable
• customizable disabled dates

• custom element

⚙️ Install

npm install svelty-picker

Property list

Property	Type	Default	Description
inputId	string	""	id attribute for input element
name	string	'date'	html attribute for underlying <input> element
disabled	bool	false	html attribute for underlying <input> element
placeholder	string	null	html attribute for underlying <input> element
required	bool	false	html attribute for underlying <input> element
value	string	null	string representation of selected value
initialDate	Date	null	initial date object, if you prefer that to value
isRange	bool	false	enables range picker mode
startDate	string|Date	null	limit minimal selectable date
endDate	string|Date	null	limit maximal selectable date
pickerOnly	bool	false	Picker is always visible and input field is then hidden, but still present
startView	number	2	Which mode should picker at, 0 - decade, 1 - year, 2 - month (default), 3 - time picker
mode	string	auto	restrict picker's mode. Possible values: auto|date|datetime|time. By default it try to guess the mode from format
disableDatesFn	function	null	Function whether passed date should be disabled or not
manualInput	bool	false	Whether manual date entry is allowed
format	string	'yyyy-mm-dd'	Format of entered date/time.
formatType	string	'standard'	Format type (standard or php)
displayFormat	string	null	Display format of entered date/time.
displayFormatType	string	null	Display format type (standard or php)
minuteIncrement	number	1	number in range 1-60 to set the increment of minutes choosable
weekStart	number	1	number in range 0-6 to select first day of the week. Sunday is 0
inputClasses	string	""	input css class string
todayBtnClasses	string	'sdt-action-btn sdt-today-btn'	today button css classes
clearBtnClasses	string	'sdt-action-btn sdt-clear-btn'	clear button css classes
todayBtn	bool	true	Show today button
clearBtn	bool	true	Show clear button
clearToggle	bool	true	Allows to clear selected date when clicking on the same date when in mode='date' or mode='auto' resolving to 'date'
autocommit	bool	true	Whether date/time selection is automatic or manual
i18n	object	en	localization object, english is by default
validatorAction	array	null	Bind validator action for inner <input> element. Designed to be used with svelte-use-form.
positionResolver	function	internal	Action which resolves floating position of picker. Default one uses @floating-ui under the hood. So you can use this library for your custom position resolver function

Documentation

For more details check the documentation

🏆 Thanks to:

• Bootstrap datepicker for some internal date and format handling

Licence

MIT