๐ Live Demo ๐
A highly customizable and feature-rich 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.
npm install @hamedf/svelte-persian-datepicker
# or
pnpm install @hamedf/svelte-persian-datepicker
# or
yarn add @hamedf/svelte-persian-datepicker
<script>
import DatePicker from '@hamedf/svelte-persian-datepicker';
let selectedDate = '';
function handleSubmit(date) {
console.log('Selected date:', date);
}
</script>
<DatePicker
bind:model={selectedDate}
mode="single"
type="date"
submit={handleSubmit}
color="blue"
clearable={true}
/>
<DatePicker
bind:model={singleDate}
mode="single"
type="date"
submit={handleSingleDate}
color="blue"
/>
<DatePicker
bind:model={dateRange}
mode="range"
type="date"
submit={handleDateRange}
color="green"
/>
<DatePicker
bind:model={multipleDates}
mode="multiple"
type="date"
submit={handleMultipleDates}
color="purple"
auto_submit={false}
/>
<DatePicker
bind:model={selectedTime}
mode="single"
type="time"
input_format="HH:mm"
submit={handleTime}
color="orange"
/>
<DatePicker
bind:model={selectedDateTime}
mode="single"
type="datetime"
input_format="YYYY-MM-DD HH:mm"
submit={handleDateTime}
color="red"
/>
<DatePicker
bind:model={dateTimeRange}
mode="range"
type="datetime"
input_format="YYYY-MM-DD HH:mm"
submit={handleDateTimeRange}
color="pink"
/>
Prop | Type | Default | Description |
---|---|---|---|
model |
string | string[] | PersianDate | PersianDate[] |
undefined |
The selected value(s) |
mode |
'single' | 'range' | 'multiple' |
'single' |
Selection mode |
type |
'date' | 'time' | 'datetime' |
'date' |
Type of picker |
format |
string |
undefined |
Output format |
input_format |
string |
undefined |
Input format |
display_format |
string |
undefined |
Display format |
color |
'blue' | 'red' | 'pink' | 'orange' | 'green' | 'purple' | 'gray' |
undefined |
Color theme |
locale |
string |
'fa' |
Locale (fa, en, ar) |
clearable |
boolean |
true |
Show clear button |
auto_submit |
boolean |
true |
Auto submit on selection |
modal |
boolean |
false |
Display as modal |
dual_input |
boolean |
false |
Separate inputs for range |
shortcut |
boolean | object |
false |
Enable shortcuts |
column |
number | object |
1 |
Number of calendar columns |
from |
string |
'1300' |
Minimum date/time |
to |
string |
'1430' |
Maximum date/time |
disable |
object |
undefined |
Disable rules |
Event | Parameters | Description |
---|---|---|
submit |
date: PersianDate | PersianDate[] |
Fired when date is submitted |
select |
date: PersianDate |
Fired when date is selected |
clear |
none |
Fired when picker is cleared |
open |
none |
Fired when picker opens |
close |
none |
Fired when picker closes |
The component supports full CSS customization. You can override the default styles by targeting the component classes:
/* Custom styling for multiple selection */
:global(.pdp-multiple .pdp-day.selected) {
background-color: #8b5cf6 !important;
color: white !important;
border-radius: 4px;
font-weight: 600;
}
/* Custom range styling */
:global(.pdp-range .pdp-day.start-range) {
background-color: your-color;
}
# Clone the repository
git clone https://github.com/hamedf62/svelte-persian-datepicker
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Run tests
pnpm test
# Build for production
pnpm build
src/
โโโ lib/
โ โโโ DatePicker.svelte # Main component
โ โโโ components/ # Sub-components
โ โ โโโ PDPArrow.svelte
โ โ โโโ PDPIcon.svelte
โ โ โโโ PDPAlt.svelte
โ โโโ modules/
โ โ โโโ core.ts # Core logic
โ โ โโโ types.ts # TypeScript types
โ โโโ assets/sass/ # Styles
โโโ routes/
โโโ +page.svelte # Demo page
The component includes comprehensive tests using Cypress:
# Run component tests
pnpm test:component
# Run e2e tests
pnpm test:e2e
# Open Cypress UI
pnpm cypress:open
For detailed documentation and API reference, visit Alireza's Documentation as this component maintains compatibility with the original Vue3 version.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
Feature | Single | Range | Multiple | Time | DateTime | DateTime Range |
---|---|---|---|---|---|---|
Select one date | โ | โ | โ | โ | โ | โ |
Select date range | โ | โ | โ | โ | โ | โ |
Select multiple dates | โ | โ | โ | โ | โ | โ |
Time selection | โ | โ | โ | โ | โ | โ |
Persian calendar | โ | โ | โ | โ | โ | โ |
Keyboard navigation | โ | โ | โ | โ | โ | โ |
Custom validation | โ | โ | โ | โ | โ | โ |
This component has been optimized for AI coding assistants and LLMs. Here's how to work with it effectively:
// COMPONENT SIGNATURE FOR AI REFERENCE
/**
* @component PersianDatePicker
* @description A comprehensive Svelte 5 Persian/Jalali DateTime picker
* @props {Object} Props - See interface below for all available props
* @bindable model - The selected date(s) value
* @example
* // Single date selection
* <DatePicker bind:model={selectedDate} />
*
* // Range selection
* <DatePicker mode="range" bind:model={dateRange} />
*
* // Multiple dates
* <DatePicker mode="multiple" bind:model={multipleDates} />
*
* // With custom validation
* <DatePicker
* bind:model={date}
* from="1400/01/01"
* to="1405/12/29"
* disable={['1403/01/01', '1403/05/15']}
* />
*/
// AI: "Create a basic Persian date picker"
let selectedDate: string;
<DatePicker
bind:model={selectedDate}
locale="fa"
type="date"
mode="single"
/>
// AI: "Create a date range picker for Persian calendar"
let dateRange: string[];
<DatePicker
bind:model={dateRange}
mode="range"
locale="fa"
dual_input={true}
/>
// AI: "Add time picker functionality"
let selectedTime: string;
<DatePicker
bind:model={selectedTime}
type="time"
from="08:00"
to="20:00"
/>
// AI: "Support both Persian and Gregorian calendars"
let date: string;
<DatePicker
bind:model={date}
locale="fa,en"
input_calendar="auto"
/>
Essential Props for Common Use Cases:
bind:model
- The selected date value(s) - ALWAYS BINDABLEmode
- Selection type: "single" | "range" | "multiple"type
- Picker type: "date" | "time" | "datetime" locale
- Language/calendar: "fa" | "en" | "ar" | "fa,en"from
/to
- Date boundaries (e.g., "1400/01/01", "1405/12/29")disable
- Disabled dates/times (array, function, or regex)Styling & UI Props:
color
- Theme: "blue" | "red" | "pink" | "orange" | "green" | "purple" | "gray"dual_input
- Separate inputs for range modemodal
- Show as modal overlayclearable
- Show clear buttonAdvanced Props:
format
- Model data format (always Gregorian)input_format
- Input parsing formatdisplay_format
- UI display formatinput_calendar
- Calendar for input: "auto" | "jalali" | "gregorian"bind:model
for data bindingmode
prop for selection behaviorfrom
/to
props for date boundariesdisable
prop for validation ruleslocale
appropriately for language/calendardual_input
for better range UX