@jalali-js/vue

@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

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:

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