Jervis Datepicker

A Vue 3 datepicker with Hijri & Gregorian support — built on top of @vuepic/vue-datepicker.

Documentation · Quick Start · API

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