@jalali-js/vue

Vue bindings for jalali-js: useCalendar, headless Calendar, styled DatePicker and TimePicker, and SSR-safe timezone resolution.

Start here: Live demo · Documentation

npm ecosystem: jalali-js · @jalali-js/i18n · @jalali-js/nlp · @jalali-js/holidays · @jalali-js/react · @jalali-js/vue · @jalali-js/web · @jalali-js/ui-react · @jalali-js/ui-vue · @jalali-js/ui-web

Contents

• Install
• Compatibility
• Quick start
• Components
• Options
• Theming
• Links
• License

Install

npm install @jalali-js/vue

import '@jalali-js/vue/date-picker.css';

Compatibility

| Item | Support | | ----- | ----------------------- | | Vue | 3.4+ (CI matrix: Vue 3) | | Nuxt | 3 and 4 (CI matrix) | | Peers | vue >=3.4 | | Node | 22 and 24 (CI matrix) |

Quick start

<script setup lang="ts">
import '@jalali-js/vue/date-picker.css';
import { DatePicker } from '@jalali-js/vue';
import type { StorageValue } from 'jalali-js';
import { ref } from 'vue';

const stored = ref<StorageValue>();
</script>

<template>
  <DatePicker v-model="stored" system="jalali" locale="fa" />
</template>

Components

DatePicker

Styled input plus popover grid (default), or variant="dropdown". Use precision="datetime" for a time panel. v-model holds the storage value.

Calendar

Headless month grid (data-jalali-* attributes, no required CSS).

TimePicker

Hour and minute lists (minuteStep, disabledHours).

useCalendar / useResolvedTimeZone

Composables matching the React hooks. Use useResolvedTimeZone() with zoned-datetime and timeZone: 'auto' under Nuxt SSR.

Range, inline, event, and time-range UIs live in @jalali-js/ui-vue.

Options

Key DatePicker props:

| Prop | Type | Default | Notes | | -------------- | ------------------------- | ----------------- | ----------------------------- | | system | 'jalali' \| 'gregorian' | 'jalali' | Display calendar | | locale | 'en' \| 'fa' \| 'ps' | 'en' | UI language | | valueFormat | ValueFormat | 'gregorian-iso' | Stored v-model shape | | variant | 'grid' \| 'dropdown' | 'grid' | Popover grid or Y/M/D selects | | precision | 'date' \| 'datetime' | 'date' | Add a time panel | | rules | SelectionRules | - | Min/max and blocked days | | showHolidays | boolean | false | Needs @jalali-js/holidays |

Full tables: Vue guide.

Theming

[data-jalali-datepicker-root] {
  --jalali-primary: #2563eb;
  --jalali-radius: 8px;
  --jalali-bg: #ffffff;
  --jalali-fg: #1a1a1a;
}

See Theming.

Links

• Live demo
• Documentation
• Recipes
• Changelog

License

MIT