Persian Date Picker

A robust, accessible date picker built on Reka UI. Features native Jalali/Gregorian switching, weekend highlighting, and ISO-8601 string support.

Installation

npx raya-ui@latest add persian-date-picker

Features

Native Jalali Support: Uses fa-IR-u-ca-persian locale for accurate Persian calendar calculations without heavy moment/date-fns libraries.
Dual Mode: Users can toggle between Jalali and Gregorian calendars directly 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 primitives.

File Structure

your-project

components

persian-date-picker

PersianDatePicker.vue

API Reference

Props

modelValue

string | { start: string, end: string }

The bound date value in standard ISO 8601 format (e.g., "2026-05-06"). Becomes an object with start/end strings if range is true.

range

boolean

false

Enables date range selection mode instead of single date picking.

placeholder

string

"انتخاب تاریخ"

Text displayed inside the trigger button when no date is actively selected.

disabled

boolean

false

Disables interaction with the picker trigger.

Active Model Value2026-05-06

Settings

Range Selection Mode

Disabled State

Placeholder Text

source-code.vue

<script setup lang="ts">
import { ref } from 'vue'
import { PersianDatePicker } from '@/components/ui/persian-date-picker'

// Accepts standard ISO 8601 strings
const date = ref('2026-05-06')
</script>

<template>
  <PersianDatePicker
    v-model="date"
    class="w-full max-w-sm"
  />
</template>