Skip to content

Latest commit

 

History

History
141 lines (92 loc) · 3.57 KB

README.md

File metadata and controls

141 lines (92 loc) · 3.57 KB
Raw

s-date-range-picker (alpha)

⚠️ This repository isn't maintained anymore but feel free to fork it as a good starting place for a date picker in svelte.

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

  • Clone the repo: git clone https://github.com/onx2/s-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

applyBtnText: string = "Apply";

cancelBtnText: string = "Camcel";

dateFormat: string = "MMM dd, yyyy";

disabledDates: Date[] = [];

endDate: Date = endOfWeek(new Date());

firstDayOfWeek: string = "sunday";

locale?: Locale = undefined; // date-fns defaults to the system locale.

maxDate: Date = addYears(new Date(), 10);

minDate: Date = subYears(new Date(), 10);

monthDropdown: boolean = false;

monthFormat: string = "MMMM";

nextIcon: string | HTMLElement = "&#9656;"; - ▸

prevIcon: string | HTMLElement = "&#9666;"; // (html | string) - ◂

resetViewBtn: boolean = false;

resetViewBtnText: string | HTMLElement = "&#8602;" // ↚

rtl: boolean = false;

singlePicker: boolean = false;

startDate: Date = startOfWeek(new Date());

timePicker: boolean = false;

timePickerControls: boolean = false;

timePickerIncrement: number = 1;

timePickerSeconds: boolean = false;

today: Date = new Date(); // Used as a reference in predefinedRanges and for underlining in calendar

todayBtn: boolean = false;

todayBtnText: string = "Today";

twoPages: boolean = true;

weekGuides: boolean = false; // Distance in calendar weeks from today

weekNumbers: boolean = false; // Local week numbers

yearDropdown: boolean = false;

Events

// Fired when a selection is made (start or end date has been chosen)
selection(): { startDate: Date, endDate: Date};

// Fired when the "Cancel" button is clicked
cancel(): { startDate: Date, endDate: Date};

// Fired when the "Apply" button is clicked
apply(): { startDate: Date, endDate: Date};

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.