https://github.com/hamedf62/svelte-persian-datepicker
Persian DatePicker for Svelte5 (converted from alireza-ab VUE3 component)
https://github.com/hamedf62/svelte-persian-datepicker
cypress datetime-picker jalali-calendar jalali-date-picker persian-calendar persian-datepicker range-picker scss svelte svelte5 time-picker timepicker typescript
Last synced: 2 months ago
JSON representation
Persian DatePicker for Svelte5 (converted from alireza-ab VUE3 component)
- Host: GitHub
- URL: https://github.com/hamedf62/svelte-persian-datepicker
- Owner: hamedf62
- Created: 2025-02-18T07:40:52.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-02-24T16:53:41.000Z (2 months ago)
- Last Synced: 2025-02-24T17:47:16.178Z (2 months ago)
- Topics: cypress, datetime-picker, jalali-calendar, jalali-date-picker, persian-calendar, persian-datepicker, range-picker, scss, svelte, svelte5, time-picker, timepicker, typescript
- Language: TypeScript
- Homepage:
- Size: 1.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Persian DatePicker Component (Svelte5)
A highly customizable date picker component built with Svelte 5, supporting Persian (Jalali), Gregorian, and Arabic calendars. This component is inspired by and converted from [Alireza's Vue3 Persian DatePicker](https://github.com/alireza-ab/vue3-persian-datepicker).
## Features
- **Multiple Types**: Use the date, time, or datetime modes.
- **Localization**: Supports multiple locales (e.g. `fa`, `en`, `ar`).
- **Customization**: Customize display formats, input formats, colors, and styles.
- **Shortcuts**: Predefined shortcuts for quick selections (e.g. yesterday, tomorrow, this week).
- **Clearable Input**: Option to clear the selected date(s).
## Documentation
this project obligate ALireza-ab Datepicker attributes as may find in [Documentations from Alireza-ab](https://alireza-ab.ir/datepicker)
## Project Structure
- **Component**: The main datepicker is implemented in [src/lib/DatePicker.svelte](src/lib/DatePicker.svelte).
- **Core Logic**: Helper functions and shortcut definitions can be found in [src/lib/modules/core.ts](src/lib/modules/core.ts).
- **Testing**: Component tests are written with Cypress and are located in [cypress/component/datepicker.cy.ts](cypress/component/datepicker.cy.ts).
- **Styles**: The component styling is managed in the SASS/CSS files under [src/lib/assets/sass/app.scss](src/lib/assets/sass/app.scss) and [src/lib/assets/sass/app.css](src/lib/assets/sass/app.css).
## Installation
Ensure that you have [pnpm](https://pnpm.io/) installed. Then run:
```sh
pnpm i @hamedf/svelte-persian-datepicker
```