svelte-date-range-slider-select v1.0.1

svelte-date-range-slider-select

Something simple to play around with Svelte, a date range component with range sliders attached for fast range selection.

Demos

Simple demo

Installation

yarn add svelte-date-range-slider-select 
npm i svelte-date-range-slider-select 

Note: Install as a dev dependency (yarn add svelte-date-range-slider-select --dev) if using Sapper to avoid a SSR error.

Usage

<script>
  import DateRangeSelect from 'svelte-date-range-slider-select';

  const name = 'createdDate';
  const heading = 'Created Date';

  // this limits the HTML5 date picker end date - e.g. today is used here 
  const endDateMax = new Date();

  // this limits the HTML5 date picker's start date - e.g. 3 years is select here
  const startDateMin = new Date(
    new Date().setFullYear(endDateMax.getFullYear(), endDateMax.getMonth() - 36)
  );

  <DateRangeSelect
    {startDateMin}
    {endDateMax}
    {name}
    {heading}
    on:onApplyDateRange={handleApplyDateRange} />

  function handleApplyDateRange(data){
    console.log(data)
    // e.g. will return an object  
    // {
    //  startDate: 2000-12-01,
    //  endDate: 2020-04-06,
    //  name: createdDate
    // }
  }

TODO

• Custom CSS for button
• Custom CSS for styling
• Allow svelte:component to be dynamically added for the button

License

LIL