vue3-hijri-gregorian-datepicker

v2.1.0

Published

12 days ago

A Vue 3 date picker component that supports both Hijri and Gregorian calendars

Vue3 Hijri Gregorian DatePicker

A comprehensive Vue 3 date picker component that seamlessly supports both Hijri (Islamic) and Gregorian calendars with the ability to switch between them on-the-fly.

Features

✨ Dual Calendar Support: Switch seamlessly between Hijri (Islamic) and Gregorian calendars

⏰ Time Selection: Optional time picker with hours, minutes, and seconds

🌍 Internationalization: Built-in support for English and Arabic languages

🎨 Theming: Light and dark theme support

📅 Flexible Formatting: Customizable date and time format strings

♿ Accessibility: Keyboard navigation and screen reader support

🎯 Vue 3 Ready: Built with Vue 3 Composition API

📱 Responsive: Works great on mobile and desktop

Installation

npm install vue3-hijri-gregorian-datepicker

Quick Start

<template>
  <div>
    <DatePicker v-model="selectedDate" />
    <p>Selected Date: {{ selectedDate.date }}</p>
    <p>Calendar Type: {{ selectedDate.type }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import DatePicker from 'vue3-hijri-gregorian-datepicker';
import 'vue3-hijri-gregorian-datepicker/dist/style.css';

const selectedDate = ref({
  date: '22-11-2025',
  type: 'gregorian'
});
</script>

Usage Examples

Basic Gregorian Calendar

<template>
  <DatePicker
    v-model="selectedDate"
    initialType="gregorian"
    language="en"
  />
</template>

<script setup>
import { ref } from 'vue';
import DatePicker from 'vue3-hijri-gregorian-datepicker';
import 'vue3-hijri-gregorian-datepicker/dist/style.css';

const selectedDate = ref({
  date: '',
  type: 'gregorian'
});
</script>

Hijri Calendar with Arabic Language

<template>
  <DatePicker
    v-model="selectedDate"
    initialType="hijri"
    language="ar"
  />
</template>

<script setup>
import { ref } from 'vue';
import DatePicker from 'vue3-hijri-gregorian-datepicker';
import 'vue3-hijri-gregorian-datepicker/dist/style.css';

const selectedDate = ref({
  date: '',
  type: 'hijri'
});
</script>

With Time Picker

<template>
  <DatePicker
    v-model="selectedDate"
    :withTime="true"
    initialType="gregorian"
  />
</template>

<script setup>
import { ref } from 'vue';
import DatePicker from 'vue3-hijri-gregorian-datepicker';
import 'vue3-hijri-gregorian-datepicker/dist/style.css';

const selectedDate = ref({
  date: '',
  type: 'gregorian'
});
</script>

Dark Theme

<template>
  <DatePicker
    v-model="selectedDate"
    :darkTheme="true"
  />
</template>

<script setup>
import { ref } from 'vue';
import DatePicker from 'vue3-hijri-gregorian-datepicker';
import 'vue3-hijri-gregorian-datepicker/dist/style.css';

const selectedDate = ref({
  date: '',
  type: 'gregorian'
});
</script>

Custom Date Format

<template>
  <DatePicker
    v-model="selectedDate"
    format="DD/MM/YYYY"
    initialType="gregorian"
  />
</template>

<script setup>
import { ref } from 'vue';
import DatePicker from 'vue3-hijri-gregorian-datepicker';
import 'vue3-hijri-gregorian-datepicker/dist/style.css';

const selectedDate = ref({
  date: '',
  type: 'gregorian'
});
</script>

Complete Example with All Options

<template>
  <div id="app">
    <!-- Controls -->
    <div class="controls">
      <label>
        <input type="checkbox" v-model="darkTheme" /> Dark Theme
      </label>
      <label>
        <input type="checkbox" v-model="disabled" /> Disabled
      </label>
      <label>
        <input type="checkbox" v-model="withTime" /> With Time
      </label>
      <label>
        <input type="checkbox" v-model="readOnly" /> Read Only
      </label>
      <label>
        Initial Type:
        <select v-model="initialType">
          <option value="gregorian">Gregorian</option>
          <option value="hijri">Hijri</option>
        </select>
      </label>
      <label>
        Language:
        <select v-model="language">
          <option value="en">English</option>
          <option value="ar">Arabic</option>
        </select>
      </label>
    </div>

    <DatePicker
      :initialType="initialType"
      :withTime="withTime"
      v-model="selectedDate"
      :language="language"
      :darkTheme="darkTheme"
      :disabled="disabled"
      :readOnly="readOnly"
      :format="customFormat"
      placeholder="Select a date"
      @cancel="onCancel"
    />

    <!-- Display the selected date and type -->
    <div class="output">
      <p>Selected Date: {{ selectedDate.date }}</p>
      <p>Calendar Type: {{ selectedDate.type }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import DatePicker from 'vue3-hijri-gregorian-datepicker';
import 'vue3-hijri-gregorian-datepicker/dist/style.css';

// Reactive state
const darkTheme = ref(false);
const disabled = ref(false);
const withTime = ref(false);
const readOnly = ref(true);
const initialType = ref('gregorian');
const language = ref('en');
const customFormat = ref('');

const selectedDate = ref({
  date: new Date().toISOString().split('T')[0],
  type: initialType.value
});

// Watch initialType and update selectedDate
watch(initialType, (newType) => {
  selectedDate.value = {
    ...selectedDate.value,
    type: newType
  };
});

const onCancel = () => {
  console.log('Date picker cancelled');
};
</script>

<style>
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.controls label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.output {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}
</style>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | Object | { date: '', type: 'gregorian' } | The selected date and calendar type | | initialType | String | 'gregorian' | Initial calendar type ('gregorian' or 'hijri') | | withTime | Boolean | false | Enable time selection (hours, minutes, seconds) | | language | String | 'en' | UI language ('en' for English or 'ar' for Arabic) | | format | String | '' | Custom date/time format string (uses moment.js format) | | disabled | Boolean | false | Disable the date picker | | readOnly | Boolean | true | Make the input field read-only | | placeholder | String | 'Select date' | Placeholder text for the input field | | darkTheme | Boolean | false | Enable dark theme |

Events

| Event | Payload | Description | |-------|---------|-------------| | update:modelValue | { date: String, type: String } | Emitted when a date is selected | | cancel | - | Emitted when the picker is closed without selecting |

Date Format Strings

Gregorian Calendar Formats

The component uses moment.js format tokens:

DD-MM-YYYY - Day-Month-Year (default)
MM/DD/YYYY - Month/Day/Year
YYYY-MM-DD - Year-Month-Day (ISO format)
DD-MM-YYYY HH:mm:ss - With time
YYYY-MM-DD HH:mm:ss - ISO format with time

Hijri Calendar Formats

For Hijri dates, use the i prefix:

iDD-iMM-iYYYY - Hijri Day-Month-Year (default)
iYYYY/iMM/iDD - Hijri Year/Month/Day
iDD-iMM-iYYYY HH:mm:ss - With time

Common Format Tokens

| Token | Output | Description | |-------|--------|-------------| | YYYY | 2025 | 4-digit year | | MM | 01-12 | Month | | DD | 01-31 | Day | | HH | 00-23 | Hours (24-hour) | | mm | 00-59 | Minutes | | ss | 00-59 | Seconds | | iYYYY | 1446 | Hijri year | | iMM | 01-12 | Hijri month | | iDD | 01-30 | Hijri day |

Styling

The component comes with default styles that can be imported:

import 'vue3-hijri-gregorian-datepicker/dist/style.css';

Custom Styling

You can override the default styles using CSS custom properties or by targeting the component classes:

/* Custom theme colors */
.dp__theme_light {
  --dp-primary-color: #1976d2;
  --dp-background-color: #ffffff;
  --dp-text-color: #212121;
}

.dp__theme_dark {
  --dp-primary-color: #90caf9;
  --dp-background-color: #1e1e1e;
  --dp-text-color: #ffffff;
}

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Dependencies

Vue 3.x
moment-hijri
moment
date-fns

Development

# Clone the repository
git clone https://github.com/inaat/vue3-hijri-gregorian-datepicker.git

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Inayat Ullah

Acknowledgments

Built with Vue 3
Uses moment-hijri for Hijri calendar calculations
Inspired by the need for dual calendar support in Vue applications

Made with ❤️ for the Vue community