A date range picker built in SvelteJS
In a Svelte App
- npm:
npm i s-date-range-picker
- yarn:
yarn add s-date-range-picker
<script>
import SDateRangePicker from "s-date-range-picker";
// Manage start and end props from main app component
let startDate = new Date();
let endDate = new Date();
// Update state on apply event
function onApply({ detail }) {
startDate = detail.startDate;
endDate = detail.endDate;
}
</script>
<SDateRangePicker {startDate} {endDate} on:apply={onApply} />
- Publish to npm
- Add the missing Props / Options
- Tests
- Linter
- Styling
- Show & hide functionality (probably in the form of a button w/ popover)
- Documentation / Demo Site
- Mobile / touch friendly
- Optimizations / reduce bundle size
- Accessibility review / updates
- Requires NodeJS
- Clone the repo:
git clone https://github.com/onx2/svelte-date-range-picker.git
- Enter directory:
cd svelte-date-range-picker
- Install dpendencies:
yarn
- Run dev web server:
yarn serve
- Run tests:
yarn test
(No tests yet) - Run linter:
yarn lint
(No linter yet)
Implemented but still being reviewed / developed
-
autoApply = false
(boolean) -
dateFormat = "MMM dd, yyyy"
(string) options -
disabledDates = []
(Date[]) -
endDate = endOfWeek(new Date())
(Date) -
firstDayOfWeek = "sunday"
(string) -
hideOnCancel = false
(boolean) -
hideOnApply = false
(boolean) -
isoWeekNumbers = false
(boolean) -
locale = undefined
(Locale)date-fns
defaults to the system locale. -
maxDate = addYears(new Date(), 10)
(Date) -
minDate = subYears(new Date(), 10)
(Date) -
monthDropdown = false
(boolean) -
monthFormat = "MMMM"
(string) options -
rtl = false
(boolean) -
singlePicker = false
(boolean) -
startDate = startOfWeek(new Date())
(Date) -
timePicker = false
(boolean) -
timePickerIncrement = 1
(number) -
timePickerSeconds = false
(boolean) -
today = new Date()
(Date) Used as a reference inpredefinedRanges
and for underlining in calendar -
prevIcon = "◂"
(html | string) - ◂ -
nextIcon = "▸"
(html | string) - ▸ -
weekGuides = false
(boolean) Distance in calendar weeks from today -
weekNumbers = false
(boolean) Local week numbers -
yearDropdown = false
(boolean) -
applyBtnText = "Apply"
(string) -
cancelBtnText = "Camcel"
(string) -
todayBtnText = "Today"
(string) -
todayBtn = false
(boolean) -
resetViewBtnText = "↚"
(html | string) - ↚ -
resetViewBtn = false
(boolean) -
id = "s-date-range-picker-" + Math.random()
(string)
Not implemented - todo
-
timePicker24Hour = true
(boolean) -
predefinedRanges = []
(Date[]) -
maxSpan = Infinity
(number) -
events = []
(Date[]) -
disabled = false
(boolean)
-
show
Fired after the picker has been shown -
hide
Fired after the picker has been hidden -
selection
Fired when a selection is made (start or end date has been chosen) -
cancel
Fired when the "Cancel" button is clicked -
apply
Fired when the "Apply" button is clicked
Thanks geakstr for the Svelte component template!
This project is using date-fns under the hood for date calculations / manipulation.