s-date-range-picker (pre-alpha)

A date range picker built in SvelteJS

Getting Started

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} />

Screenshot (defaults)

Todos

• 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

Development

• 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)

API

Props / Options

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 in predefinedRanges 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)

Events

• 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.