Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/onx2/s-date-range-picker
📅 A date range picker built with Svelte
https://github.com/onx2/s-date-range-picker
date-fns date-picker date-range date-range-picker date-time-picker datepicker datetimepicker svelte svelte-components svelte-js svelte-v3 svelte3 sveltejs
Last synced: 4 months ago
JSON representation
📅 A date range picker built with Svelte
- Host: GitHub
- URL: https://github.com/onx2/s-date-range-picker
- Owner: onx2
- License: mit
- Created: 2019-11-25T02:29:20.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T01:55:40.000Z (about 2 years ago)
- Last Synced: 2024-09-29T12:02:40.929Z (4 months ago)
- Topics: date-fns, date-picker, date-range, date-range-picker, date-time-picker, datepicker, datetimepicker, svelte, svelte-components, svelte-js, svelte-v3, svelte3, sveltejs
- Language: Svelte
- Homepage:
- Size: 2.78 MB
- Stars: 12
- Watchers: 1
- Forks: 3
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
[](https://circleci.com/gh/onx2/s-date-range-picker)
[](https://badge.fury.io/js/s-date-range-picker)
A date range picker built with [Svelte](https://svelte.dev/)
## Getting Started
**In a Svelte App**
- npm: `npm i s-date-range-picker`
- yarn: `yarn add s-date-range-picker`
```svelte
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;
}
```
## 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
```typescript
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
```typescript
// 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](https://github.com/geakstr/svelte-3-rollup-typescript-vscode) for the [Svelte](https://svelte.dev/) component template!
This project is using [date-fns](https://date-fns.org/) under the hood for date calculations / manipulation.