Skip to content

mskocik/svelty-picker

Repository files navigation

📆 Svelty Picker NPM version

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:

Licence

MIT