vue-persian-datepicker-element

Persian Datepicker Vue Component

A modern, fully-featured Persian (Jalali) date picker component for Vue 3 applications.

Features

• 🎨 Fully customizable theme via CSS variables
• 📱 Responsive design
• 🔤 RTL support
• 📅 Holiday highlighting
• 🎯 Range picker mode
• ⌨️ Keyboard navigation
• 🎭 Custom holiday types
• 🚫 Disabled dates support
• 📋 Min/Max date restrictions

Installation

npm install vue-persian-datepicker-element persian-datepicker-element
# or
yarn add vue-persian-datepicker-element persian-datepicker-element
# or
pnpm add vue-persian-datepicker-element persian-datepicker-element

Basic Usage

<template>
  <PersianDatepicker
    placeholder="انتخاب تاریخ"
    format="YYYY/MM/DD"
    @change="handleChange"
  />
</template>

<script setup>
import { PersianDatepicker } from 'vue-persian-datepicker-element';

const handleChange = (event) => {
  const { jalali, gregorian, isHoliday } = event.detail;
  console.log('Selected date:', jalali);
};
</script>

Advanced Examples

With v-model

<template>
  <PersianDatepicker
    v-model="selectedDate"
    placeholder="انتخاب تاریخ"
    format="YYYY/MM/DD"
  />
</template>

<script setup>
import { ref } from 'vue';
import { PersianDatepicker } from 'vue-persian-datepicker-element';

const selectedDate = ref('');
</script>

With Date Limits

<template>
  <PersianDatepicker
    :min-date="[1400, 1, 1]"
    :max-date="[1402, 12, 29]"
    :disabled-dates="isWeekend"
    placeholder="انتخاب تاریخ"
    format="YYYY/MM/DD"
  />
</template>

<script setup>
import { PersianDatepicker } from 'vue-persian-datepicker-element';

const isWeekend = (year, month, day) => {
  // Disable weekends (Friday and Saturday)
  const date = new Date(year, month - 1, day);
  const dayOfWeek = date.getDay();
  return dayOfWeek === 5 || dayOfWeek === 6;
};
</script>

With Range Selection

<template>
  <PersianDatepicker
    range-mode
    :range-start="[1402, 1, 1]"
    :range-end="[1402, 1, 15]"
    @change="handleRangeChange"
  />
</template>

<script setup>
import { ref } from 'vue';
import { PersianDatepicker } from 'vue-persian-datepicker-element';

const dateRange = ref({ start: null, end: null });

const handleRangeChange = (event) => {
  if (event.detail.isRange) {
    dateRange.value = {
      start: event.detail.range.start,
      end: event.detail.range.end
    };
  }
};
</script>

With Custom Styling

<template>
  <PersianDatepicker
    placeholder="انتخاب تاریخ"
    format="YYYY/MM/DD"
    class="custom-datepicker"
  />
</template>

<script setup>
import { PersianDatepicker } from 'vue-persian-datepicker-element';
</script>

<style>
.custom-datepicker {
  --jdp-primary: #3b82f6;
  --jdp-primary-hover: #2563eb;
  --jdp-border-radius: 0.5rem;
  --jdp-font-family: 'IRANSans', sans-serif;
}
</style>

With Holiday Types

<template>
  <div>
    <PersianDatepicker
      event-types="Iran,Afghanistan,AncientIran,International"
      placeholder="نمایش همه تعطیلات"
    />

    <PersianDatepicker
      event-types="Afghanistan"
      placeholder="تعطیلات افغانستان"
    />

    <PersianDatepicker
      event-types="all"
      placeholder="نمایش همه انواع تعطیلات"
    />
  </div>
</template>

<script setup>
import { PersianDatepicker } from 'vue-persian-datepicker-element';
</script>

With Ref Methods

<template>
  <div>
    <PersianDatepicker ref="datepicker" />
    
    <div style="margin-top: 1rem">
      <button @click="getValue">دریافت مقدار</button>
      <button @click="setValue">تنظیم به ۱۵ دی ۱۴۰۲</button>
      <button @click="openCalendar">باز کردن تقویم</button>
      <button @click="closeCalendar">بستن تقویم</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { PersianDatepicker } from 'vue-persian-datepicker-element';

const datepicker = ref();

const getValue = () => {
  const value = datepicker.value?.getValue();
  console.log('مقدار فعلی:', value);
};

const setValue = () => {
  // تنظیم تاریخ به ۱۵ دی ۱۴۰۲
  datepicker.value?.setValue(1402, 10, 15);
};

const openCalendar = () => {
  datepicker.value?.open();
};

const closeCalendar = () => {
  datepicker.value?.close();
};
</script>

Props

Methods

Access component methods using a ref:

<template>
  <PersianDatepicker ref="datepicker" />
</template>

<script setup>
const datepicker = ref();

// Available methods
datepicker.value?.getValue();
datepicker.value?.setValue(year, month, day);
datepicker.value?.open();
datepicker.value?.close();
datepicker.value?.setRange(startDate, endDate);
datepicker.value?.getRange();
datepicker.value?.clear();
datepicker.value?.setTime(9, 45, 30);
datepicker.value?.getTime();
</script>

Events

Theme Customization

You can customize the appearance using standard CSS:

<style>
.persian-datepicker {
  /* Add your custom styles here */
}
</style>

Range Picker Example

<template>
  <PersianDatepicker
    range-mode
    :range-start="[1402, 1, 1]"
    :range-end="[1402, 1, 15]"
    @change="handleRangeChange"
  />
</template>

<script setup>
const handleRangeChange = (event) => {
  const { range } = event.detail;
  console.log('Selected range:', range);
};
</script>

npm install vue-persian-datepicker-element persian-datepicker-element
# یا
yarn add vue-persian-datepicker-element persian-datepicker-element
# یا
pnpm add vue-persian-datepicker-element persian-datepicker-element

<template>
  <PersianDatepicker
    placeholder="انتخاب تاریخ"
    format="YYYY/MM/DD"
    @change="handleChange"
  />
</template>

<script setup>
import { PersianDatepicker } from 'vue-persian-datepicker-element';

const handleChange = (event) => {
  const { jalali, gregorian, isHoliday } = event.detail;
  console.log('تاریخ انتخاب شده:', jalali);
};
</script>

<template>
  <PersianDatepicker ref="datepicker" />
</template>

<script setup>
const datepicker = ref();

// متدهای در دسترس
datepicker.value?.getValue();
datepicker.value?.setValue(year, month, day);
datepicker.value?.open();
datepicker.value?.close();
datepicker.value?.setRange(startDate, endDate);
datepicker.value?.getRange();
datepicker.value?.clear();
datepicker.value?.setTime(9, 45, 30);
datepicker.value?.getTime();
</script>

<style>
.persian-datepicker {
  /* Add your custom styles here */
}
</style>

<template>
  <PersianDatepicker
    range-mode
    :range-start="[1402, 1, 1]"
    :range-end="[1402, 1, 15]"
    @change="handleRangeChange"
  />
</template>

<script setup>
const handleRangeChange = (event) => {
  const { range } = event.detail;
  console.log('بازه انتخاب شده:', range);
};
</script>