jervis-datepicker

---

Why?

Jervis Datepicker is a thin wrapper around @vuepic/vue-datepicker that adds first-class Hijri calendar support. It is intentionally not enterprise — only 4 extra props plus a few helpers. Every original prop, event, and slot is forwarded as-is.

• Full Hijri support — Arabic or Latin month names.
• Gregorian by default — same behavior as the underlying library.
• Drop-in — already using @vuepic/vue-datepicker? Just rename the import.
• Lightweight — no runtime dependencies beyond what you already need.
• Typed — full TypeScript definitions.

Installation

npm install jervis-datepicker
# or
pnpm add jervis-datepicker
# or
yarn add jervis-datepicker

Usage

As a component

<script setup>
import { ref } from "vue";
import { JervisDatepicker } from "jervis-datepicker";
import "jervis-datepicker/style.css";

const date = ref();
</script>

<template>
  <!-- Gregorian (default) -->
  <JervisDatepicker v-model="date" />

  <!-- Hijri -->
  <JervisDatepicker v-model="date" calendar="hijri" />

  <!-- Hijri date range -->
  <JervisDatepicker v-model="date" calendar="hijri" range />
</template>

As a plugin

import { createApp } from "vue";
import App from "./App.vue";
import JervisDatepicker from "jervis-datepicker";
import "jervis-datepicker/style.css";

createApp(App).use(JervisDatepicker).mount("#app");

Jervis-specific props

Prop	Type	Default	Description
calendar	'gregorian' | 'hijri'	'gregorian'	Which calendar to display.
hijriLocale	'ar' | 'en'	'ar'	Language for Hijri month names.
hijriFormat	string	'iDD/iMM/iYYYY'	Display/input format (moment-hijri tokens).
showHijriHeader	boolean	true	Show the Hijri month name in the calendar header.

Every other prop (range, multi-dates, time-picker, min-date, max-date, ...) is forwarded directly to @vuepic/vue-datepicker. See their docs.

Hijri helpers

import {
  formatHijri,
  parseHijri,
  fromHijri,
  getHijriMonthName,
  getHijriYear,
  getHijriMonth,
} from "jervis-datepicker";

formatHijri(new Date()); // "13/10/1447"
parseHijri("13/10/1447"); // Date
fromHijri(1447, 8, 1); // 1 Ramadan 1447 → Date
getHijriMonthName(new Date(), "ar"); // "شوال"

Full reference: Hijri Helpers docs.

Local development

npm install
npm run docs:dev      # preview the docs site
npm run build         # build the package
npm run docs:build    # build the docs

License

MIT Kerolos Zakaria