Persian Date Picker
A robust, accessible date picker built on Reka UI. Features native Jalali/Gregorian switching, weekend highlighting, and ISO-8601 string support.
Single Date Selection
Default mode. Automatically handles Jalali (Persian) locale and weekends (Friday). Users can switch to Gregorian (AD) using the internal toggle.
v-model: 2026-02-14
Range Selection
Enable range mode by passing the range prop. The model value becomes an object with start and end keys.
v-model: {
"start": "2026-02-14",
"end": "2026-02-19"
}
PersianDateExample.vue
<script setup lang="ts">
import { ref } from 'vue'
import { PersianDatePicker } from '@/components/ui/persian-date-picker'
// Accepts standard ISO strings
const date = ref('2026-02-14')
const range = ref({ start: '2026-02-14', end: '2026-02-19' })
</script>
<template>
<PersianDatePicker v-model="date" placeholder="Select Date" />
<PersianDatePicker v-model="range" range placeholder="Select Range" />
</template>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | string | { start: string, end: string } | - | The selected date in ISO 8601 format (e.g., 2024-03-20). |
| range | boolean | false | Enables date range selection mode. |
| placeholder | string | "انتخاب تاریخ" | Text displayed when no date is selected. |
| disabled | boolean | false | Disables interaction with the picker. |
| class | string | - | Custom classes for the trigger button wrapper. |
Features
- Native Jalali Support: Uses
fa-IR-u-ca-persianlocale for accurate Persian calendar calculations. - Dual Mode: Users can toggle between Jalali and Gregorian calendars inside the popup.
- Weekend Logic: Automatically highlights Fridays in Jalali mode and Sat/Sun in Gregorian mode.
- RTL/LTR: Automatically adjusts layout direction based on the active calendar.
- Keyboard Navigation: Full keyboard support powered by Reka UI.
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/persian-date-picker.json