Package Exports

s-date-range-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (s-date-range-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svelte-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

// App.svelte
<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} />

Current state of the picker (missing quite a few pieces of functionality / design) Current state of date picker - WIP

Todos

Missing Props / Options
Tests
Linter
Add TypeScript configuration
Convert to TypeScript
Documentation / Demo Site
Publish to npm
Mobile / touch friendly

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)

API

Props / Options

autoApply (boolean)
dateFormat (string)
disabled (boolean)
disabledDates (Date[])
endDate (Date)
events (Date[])
firstDayOfWeek (string)
hideOnCancel (boolean)
hideOnApply (boolean)
isoWeekNumbers (boolean)
locale (Locale)
maxDate (Date)
maxSpan (number) - in days
minDate (Date)
monthDropdown (boolean)
monthFormat (string)
predefinedRanges (Date[])
rtl (boolean)
singlePicker (boolean)
startDate (Date)
timePicker (boolean)
timePicker24Hour (boolean)
timePickerIncrement (number)
timePickerSeconds (boolean)
today (Date)
weekGuides (boolean)
weekNumbers (boolean)
yearDropdown (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.