Vue3 Persian Datepicker - Documentation

About

This is a fork of the original @alireza-ab/vue3-persian-datepicker maintained by Alireza Alibeiki. All credits for the original work belong to the original author.

Note: This fork includes additional improvements and bug fixes. See the SET Improvements section below for details.

Features

Nuxt Support
Works with Nuxt 3 out of the box

Single & Range Selection
Select single dates or date ranges

Date & Time
Pick dates, times, or both together

Keyboard Support
Navigate with arrow keys

Customizable Style
Fully styleable with CSS variables

Localization
Persian and English built-in

Minute/Hour Step
Configurable time increments

Dual Input
Optional separate start/end inputs

SET (Improvements)

New Features in This Fork

minuteStep prop - Control the step increment for adding minutes in time/datetime pickers
hourStep prop - Control the step increment for adding hours in time/datetime pickers
Time step bug fixes - Fixed issues with time navigation when using custom step values

These features allow more flexible time picking, especially useful for appointment scheduling, time slot selection, and similar use cases.

Installation

npm install @h-sanadgol/vue3-persian-datepicker

or

pnpm add @h-sanadgol/vue3-persian-datepicker

Basic Usage

<template>
  <DatePicker
    v-model="date"
    type="date"
    :minute-step="5"
    :hour-step="2"
  />
</template>

<script setup>
import DatePicker from '@h-sanadgol/vue3-persian-datepicker';
</script>

Props

Prop	Type	Default	Description
`type`	String	`'date'`	Type of picker: `date`, `time`, or `datetime`
`format`	String	`'YYYY-MM-DD'`	Format of the model value
`inputFormat`	String	same as `type`	Format of the input value
`displayFormat`	String	`'?D ?MMMM'`	Format shown in the footer
`from`	String	`'1300'`	Start date of the picker
`to`	String	`'1499'`	End date of the picker
`mode`	String	`'range'`	Selection mode: `single` or `range`
`locale`	String	`'fa'`	Locale: `fa`, `en`, `fa,en`, etc.
`column`	Number \| Object	`{ 576: 1 }`	Number of columns
`minuteStep`	Number	`1`	Step increment for adding minutes
`hourStep`	Number	`1`	Step increment for adding hours
`autoSubmit`	Boolean	`true`	Auto submit when selection is complete
`clearable`	Boolean	`false`	Allow clearing the selected date
`modal`	Boolean	`false`	Show picker as modal
`show`	Boolean	`false`	Controlled visibility of picker
`clickOn`	String	`'all'`	Trigger picker on: `all`, `input`, `icon`, `none`
`label`	String	undefined	Label text
`dualInput`	Boolean	`false`	Use two inputs for display
`iconInside`	Boolean	`false`	Show icon inside input
`shortcut`	Boolean \| Object	`false`	Shortcuts for quick selection
`disable`	Array \| String \| Function \| RegExp	undefined	Disable specific dates/times
`localeConfig`	Object	undefined	Custom locale configuration
`styles`	Object	undefined	Custom styles
`color`	String	undefined	Preset color: `red`, `green`, `blue`, etc.

Events

Event	Payload	Description
`select`	`date`	Emitted when a date/time is selected
`submit`	`date \| dates`	Emitted when selection is submitted
`open`	-	Emitted when picker opens
`close`	-	Emitted when picker closes
`clear`	-	Emitted when selection is cleared
`update:modelValue`	`value`	Emitted when model value changes

Examples

Date Picker

<template>
  <DatePicker v-model="date" type="date" />
</template>

Time Picker

<template>
  <DatePicker
    v-model="time"
    type="time"
    :minute-step="10"
    :hour-step="2"
  />
</template>

DateTime Picker

<template>
  <DatePicker
    v-model="datetime"
    type="datetime"
    :minute-step="5"
  />
</template>

Range Selection

<template>
  <DatePicker v-model="range" mode="range" />
</template>

Single Selection

<template>
  <DatePicker v-model="date" mode="single" />
</template>

With minuteStep and hourStep

<template>
  <DatePicker
    v-model="appointment"
    type="datetime"
    :minute-step="15"
    :hour-step="1"
  />
</template>

With Disabled Dates

<template>
  <DatePicker
    v-model="date"
    type="date"
    disable="1399/6/15"
  />
</template>

Custom Locale

<template>
  <DatePicker
    v-model="date"
    locale="en"
    :locale-config="customLocale"
  />
</template>

Nuxt Module

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@h-sanadgol/vue3-persian-datepicker/nuxt'],
});

Original Documentation

For the original documentation and examples, visit https://alireza-ab.ir/datepicker.