vue3-hijri-gregorian-datepicker

vue3-hijri-gregorian-datepicker is a Vue 3 date picker component that supports both Hijri (Islamic) and Gregorian calendars. The component allows users to select a date and time, and provides options to switch between the two calendar systems.

Features

• Hijri (Islamic) and Gregorian calendar support
• Time selection (hours, minutes, seconds)
• Easy to switch between Hijri and Gregorian calendars
• Configurable in English and Arabic languages
• Customizable date and time formatting

Installation

To install vue3-hijri-gregorian-datepicker, you can use npm:

1npm install vue3-hijri-gregorian-datepicker

Usage

Here is a basic example of how to use the vue3-hijri-gregorian-datepicker in your Vue 3 project:

1<template>
2  <div id="app">
3    <!-- Controls -->
4    <div class="controls">
5      <label>
6        <input type="checkbox" v-model="darkTheme" /> Dark Theme
7      </label>
8      <label>
9        <input type="checkbox" v-model="disabled" /> Disabled
10      </label>
11      <label>
12        <input type="checkbox" v-model="withTime" /> With Time
13      </label>
14      <label>
15        <input type="checkbox" v-model="readOnly" /> Read Only
16      </label>
17      <label>
18        Initial Type:
19        <select v-model="initialType">
20          <option value="gregorian">Gregorian</option>
21          <option value="hijri">Hijri</option>
22        </select>
23      </label>
24      <label>
25        Language:
26        <select v-model="language">
27          <option value="en">English</option>
28          <option value="ar">Arabic</option>
29        </select>
30      </label>
31      <label>
32        Predefined Formats:
33        <select v-model="selectedFormat">
34          <option v-for="format in availableFormats" :key="format" :value="format">
35            {{ format }}
36          </option>
37        </select>
38      </label>
39      <label>
40        Custom Format:
41        <input
42          type="text"
43          v-model="customFormat"
44          placeholder="Enter custom format (optional)"
45        />
46      </label>
47    </div>
48    
49    <DatePicker 
50      :initialType="initialType" 
51      :withTime="withTime" 
52      v-model="selectedDate" 
53      cal
54      :language="language" 
55      :darkTheme="darkTheme"
56      :disabled="disabled"
57      :readOnly="readOnly"
58      :format="actualFormat"
59    />
60    
61    <!-- Display the selected date and type -->
62    <p>Selected Date: {{ selectedDate.date }}</p>
63    <p>Calendar Type: {{ selectedDate.type }}</p>
64  </div>
65</template><script setup>
66import { ref, computed, watch } from 'vue';
67import DatePicker from '../src/components/DatePicker.vue';
68
69// Reactive state
70const darkTheme = ref(false);
71const disabled = ref(false);
72const withTime = ref(false);
73const readOnly = ref(false);
74const initialType = ref('gregorian'); // Default to Hijri
75const language = ref('en');
76const customFormat = ref('');
77const selectedFormat = ref('');
78const selectedDate = ref({
79  date:new Date().toISOString().split('T')[0],//'28-10-1446
80  type: initialType.value
81});
82
83// Watch initialType and update selectedDate
84watch(initialType, (newType) => {
85  selectedDate.value = {
86    ...selectedDate.value,
87    type: newType
88  };
89});
90
91// Format options
92const gregorianFormats = [
93 
94  'yyyy-MM-dd',
95  'MM/dd/yyyy',
96  'dd-MM-yyyy',
97  'dd/MM/yyyy',
98  'yyyy-MM-dd HH:mm:ss',
99  'MM/dd/yyyy HH:mm:ss',
100  'dd-MM-yyyy HH:mm:ss',
101  'dd/MM/yyyy HH:mm:ss',
102];
103
104const hijriFormats = [
105  'iYYYY-iMM-iDD',
106  'iDD-iMM-iYYYY',
107  'iYYYY/iMM/iDD',
108  'iDD/iMM/iYYYY',
109  'iYYYY-iMM-iDD HH:mm:ss',
110  'iDD-iMM-iYYYY HH:mm:ss',
111  'iYYYY/iMM/iDD HH:mm:ss',
112  'iDD/iMM/iYYYY HH:mm:ss',
113];
114
115const availableFormats = computed(() => 
116  initialType.value === 'hijri' ? hijriFormats : gregorianFormats
117);
118
119const actualFormat = computed(() => 
120  customFormat.value || selectedFormat.value || ''
121);
122
123watch(selectedFormat, (newFormat) => {
124  if (newFormat) customFormat.value = newFormat;
125});
126</script>
127

Props

• initialType (String): Specifies the initial calendar type. Can be 'gregorian' or 'hijri'. Default is 'gregorian'.
• withTime (Boolean): Enables time selection (hours, minutes, seconds). Default is false.
• modelValue (Object): The selected date and time value in UTC format , Calender type.
• language (String): The language for the UI. Can be 'en' for English or 'ar' for Arabic. Default is 'en'.
• format (String): The format for displaying the date and time.
• disabled (Boolean): Disables the date picker. Default is false.
• readOnly (Boolean): Makes the date picker read-only. Default is true.
• darkTheme (Boolean): The default theme is light . Default is false.
• placeholder (String): Placeholder text for the date input field. Default is 'Select date'.

Events

• update:modelValue: Emits the selected date and time value in UTC format.
• cancel: Emits when the date picker is closed without confirming a date.

License

This project is licensed under the MIT License.