s-date-range-picker

s-date-range-picker (alpha)

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

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 = "▸"; - ▸
 
prevIcon: string | HTMLElement = "◂"; // (html | string) - ◂
 
resetViewBtn: boolean = false;
 
resetViewBtnText: string | HTMLElement = "↚" // ↚
 
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.