s-date-range-picker

    0.3.0 • Public • Published

    s-date-range-picker (alpha)

    CircleCI npm version

    Branch coverage Function coverage Line coverage Statement coverage

    A date range picker built with Svelte

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

    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
    • Run format: yarn format
    • Run linter: yarn lint
    • Run build: yarn build

    API

    Props / Options

    applyBtnTextstring = "Apply";
     
    cancelBtnTextstring = "Camcel";
     
    dateFormatstring = "MMM dd, yyyy";
     
    disabledDatesDate[] = [];
     
    endDateDate = endOfWeek(new Date());
     
    firstDayOfWeekstring = "sunday";
     
    locale?: Locale = undefined; // date-fns defaults to the system locale.
     
    maxDateDate = addYears(new Date(), 10);
     
    minDateDate = subYears(new Date(), 10);
     
    monthDropdownboolean = false;
     
    monthFormatstring = "MMMM";
     
    nextIconstring | HTMLElement = "&#9656;"; - ▸
     
    prevIconstring | HTMLElement = "&#9666;"; // (html | string) - ◂
     
    resetViewBtnboolean = false;
     
    resetViewBtnTextstring | HTMLElement = "&#8602;" // ↚
     
    rtlboolean = false;
     
    singlePickerboolean = false;
     
    startDateDate = startOfWeek(new Date());
     
    timePickerboolean = false;
     
    timePickerControlsboolean = false;
     
    timePickerIncrementnumber = 1;
     
    timePickerSecondsboolean = false;
     
    todayDate = new Date(); // Used as a reference in predefinedRanges and for underlining in calendar
     
    todayBtnboolean = false;
     
    todayBtnTextstring = "Today";
     
    twoPagesboolean = true;
     
    weekGuidesboolean = false; // Distance in calendar weeks from today
     
    weekNumbersboolean = false; // Local week numbers
     
    yearDropdownboolean = false;

    Events

    // Fired when a selection is made (start or end date has been chosen)
    selection(){ startDateDate, endDateDate};
     
    // Fired when the "Cancel" button is clicked
    cancel(){ startDateDate, endDateDate};
     
    // Fired when the "Apply" button is clicked
    apply(){ startDateDate, endDateDate};

    Goals

    • 100% test coverage
    • Event data
    • Better accessibility
    • Total localization
    • AM / PM times
    • Maximum span of days option
    • Predefined ranges option
    • Add storybook for demo site to display different props / options
    • Convert to Typescript
    • Theming capabilities with a default theme

    Thanks geakstr for the Svelte component template!

    This project is using date-fns under the hood for date calculations / manipulation.

    Install

    npm i s-date-range-picker

    DownloadsWeekly Downloads

    55

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    439 kB

    Total Files

    97

    Last publish

    Collaborators

    • jeffrooks