{"id":14962710,"url":"https://github.com/onx2/s-date-range-picker","last_synced_at":"2025-10-25T00:30:38.590Z","repository":{"id":44037383,"uuid":"223846220","full_name":"onx2/s-date-range-picker","owner":"onx2","description":"📅 A date range picker built with Svelte","archived":false,"fork":false,"pushed_at":"2023-01-05T01:55:40.000Z","size":2920,"stargazers_count":12,"open_issues_count":19,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T04:31:52.996Z","etag":null,"topics":["date-fns","date-picker","date-range","date-range-picker","date-time-picker","datepicker","datetimepicker","svelte","svelte-components","svelte-js","svelte-v3","svelte3","sveltejs"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onx2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-25T02:29:20.000Z","updated_at":"2024-06-11T04:28:21.000Z","dependencies_parsed_at":"2023-02-03T05:02:19.069Z","dependency_job_id":null,"html_url":"https://github.com/onx2/s-date-range-picker","commit_stats":null,"previous_names":["onx2/svelte-date-range-picker"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onx2%2Fs-date-range-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onx2%2Fs-date-range-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onx2%2Fs-date-range-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onx2%2Fs-date-range-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onx2","download_url":"https://codeload.github.com/onx2/s-date-range-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238046821,"owners_count":19407621,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["date-fns","date-picker","date-range","date-range-picker","date-time-picker","datepicker","datetimepicker","svelte","svelte-components","svelte-js","svelte-v3","svelte3","sveltejs"],"created_at":"2024-09-24T13:30:24.535Z","updated_at":"2025-10-25T00:30:38.239Z","avatar_url":"https://github.com/onx2.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# s-date-range-picker (alpha)\n\n## ⚠️ This repository isn't maintained anymore but feel free to fork it as a good starting place for a date picker in svelte.\n\n[![CircleCI](https://circleci.com/gh/onx2/s-date-range-picker.svg?style=svg)](https://circleci.com/gh/onx2/s-date-range-picker)\n[![npm version](https://badge.fury.io/js/s-date-range-picker.svg)](https://badge.fury.io/js/s-date-range-picker)\n\n![Branch coverage](./coverage/badge-branches.svg)\n![Function coverage](./coverage/badge-functions.svg)\n![Line coverage](./coverage/badge-lines.svg)\n![Statement coverage](./coverage/badge-statements.svg)\n\nA date range picker built with [Svelte](https://svelte.dev/)\n\n## Getting Started\n\n**In a Svelte App**\n\n- npm: `npm i s-date-range-picker`\n- yarn: `yarn add s-date-range-picker`\n\n```svelte\n\u003cscript\u003e\n  import SDateRangePicker from \"s-date-range-picker\";\n\n  // Manage start and end props from main app component\n  let startDate = new Date();\n  let endDate = new Date();\n\n  // Update state on apply event\n  function onApply({ detail }) {\n    startDate = detail.startDate;\n    endDate = detail.endDate;\n  }\n\u003c/script\u003e\n\n\u003cSDateRangePicker {startDate} {endDate} on:apply={onApply} /\u003e\n```\n\n## Development\n\n- Clone the repo: `git clone https://github.com/onx2/s-date-range-picker.git`\n- Enter directory: `cd svelte-date-range-picker`\n- Install dpendencies: `yarn`\n- Run dev web server: `yarn serve`\n- Run tests: `yarn test`\n- Run format: `yarn format`\n- Run linter: `yarn lint`\n- Run build: `yarn build`\n\n## API\n\n### Props / Options\n```typescript\napplyBtnText: string = \"Apply\";\n\ncancelBtnText: string = \"Camcel\";\n\ndateFormat: string = \"MMM dd, yyyy\";\n\ndisabledDates: Date[] = [];\n\nendDate: Date = endOfWeek(new Date());\n\nfirstDayOfWeek: string = \"sunday\";\n\nlocale?: Locale = undefined; // date-fns defaults to the system locale.\n\nmaxDate: Date = addYears(new Date(), 10);\n\nminDate: Date = subYears(new Date(), 10);\n\nmonthDropdown: boolean = false;\n\nmonthFormat: string = \"MMMM\";\n\nnextIcon: string | HTMLElement = \"\u0026#9656;\"; - ▸\n\nprevIcon: string | HTMLElement = \"\u0026#9666;\"; // (html | string) - ◂\n\nresetViewBtn: boolean = false;\n\nresetViewBtnText: string | HTMLElement = \"\u0026#8602;\" // ↚\n\nrtl: boolean = false;\n\nsinglePicker: boolean = false;\n\nstartDate: Date = startOfWeek(new Date());\n\ntimePicker: boolean = false;\n\ntimePickerControls: boolean = false;\n\ntimePickerIncrement: number = 1;\n\ntimePickerSeconds: boolean = false;\n\ntoday: Date = new Date(); // Used as a reference in predefinedRanges and for underlining in calendar\n\ntodayBtn: boolean = false;\n\ntodayBtnText: string = \"Today\";\n\ntwoPages: boolean = true;\n\nweekGuides: boolean = false; // Distance in calendar weeks from today\n\nweekNumbers: boolean = false; // Local week numbers\n\nyearDropdown: boolean = false;\n```\n\n### Events\n```typescript\n// Fired when a selection is made (start or end date has been chosen)\nselection(): { startDate: Date, endDate: Date};\n\n// Fired when the \"Cancel\" button is clicked\ncancel(): { startDate: Date, endDate: Date};\n\n// Fired when the \"Apply\" button is clicked\napply(): { startDate: Date, endDate: Date};\n```\n\n### Goals\n- 100% test coverage\n- Event data\n- Better accessibility\n- Total localization\n- AM / PM times\n- Maximum span of days option\n- Predefined ranges option\n- Add storybook for demo site to display different props / options\n- Convert to Typescript\n- Theming capabilities with a default theme\n---\n\nThanks [geakstr](https://github.com/geakstr/svelte-3-rollup-typescript-vscode) for the [Svelte](https://svelte.dev/) component template!\n\nThis project is using [date-fns](https://date-fns.org/) under the hood for date calculations / manipulation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonx2%2Fs-date-range-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonx2%2Fs-date-range-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonx2%2Fs-date-range-picker/lists"}