📆 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