@sherifnabil/hijri-gregorian-calendar-vue2

Vue 2 wrapper for the Hijri-Gregorian Calendar DatePicker library.

Installation

npm install @sherifnabil/hijri-gregorian-calendar-core @sherifnabil/hijri-gregorian-calendar-vue2

Quick Start

<template>
  <HijriGregorianCalendar
    v-model="selectedDate"
    calendar="gregorian"
    locale="en"
  />
</template>

<script>
import { HijriGregorianCalendar } from '@sherifnabil/hijri-gregorian-calendar-vue2';
import '@sherifnabil/hijri-gregorian-calendar-vue2/styles';

export default {
  components: { HijriGregorianCalendar },
  data() {
    return {
      selectedDate: null
    };
  }
};
</script>

Usage Examples

Single Date Selection

<template>
  <HijriGregorianCalendar
    v-model="date"
    calendar="gregorian"
    locale="en"
    placeholder="Select a date"
  />
</template>

<script>
import { HijriGregorianCalendar } from '@sherifnabil/hijri-gregorian-calendar-vue2';
import '@sherifnabil/hijri-gregorian-calendar-vue2/styles';

export default {
  components: { HijriGregorianCalendar },
  data() {
    return {
      date: null
    };
  }
};
</script>

Date Range Selection

<template>
  <HijriGregorianCalendar
    v-model="dateRange"
    :range="true"
    calendar="hijri"
    locale="ar"
    placeholder="Select date range"
  />
</template>

<script>
import { HijriGregorianCalendar } from '@sherifnabil/hijri-gregorian-calendar-vue2';
import '@sherifnabil/hijri-gregorian-calendar-vue2/styles';

export default {
  components: { HijriGregorianCalendar },
  data() {
    return {
      dateRange: { start: null, end: null }
    };
  }
};
</script>

With Date Constraints

<template>
  <HijriGregorianCalendar
    v-model="date"
    :min-date="{ year: 2024, month: 1, day: 1 }"
    :max-date="{ year: 2024, month: 12, day: 31 }"
    :disabled-dates="[
      { year: 2024, month: 1, day: 1 },
      { year: 2024, month: 1, day: 15 }
    ]"
    :disabled-days-of-week="[0, 6]"
    calendar="gregorian"
  />
</template>

<script>
import { HijriGregorianCalendar } from '@sherifnabil/hijri-gregorian-calendar-vue2';
import '@sherifnabil/hijri-gregorian-calendar-vue2/styles';

export default {
  components: { HijriGregorianCalendar },
  data() {
    return {
      date: null
    };
  }
};
</script>

Editable Input

<template>
  <HijriGregorianCalendar
    v-model="date"
    :editable="true"
    format="dd/MM/yyyy"
    input-format="dd-MM-yyyy"
    calendar="gregorian"
  />
</template>

<script>
import { HijriGregorianCalendar } from '@sherifnabil/hijri-gregorian-calendar-vue2';
import '@sherifnabil/hijri-gregorian-calendar-vue2/styles';

export default {
  components: { HijriGregorianCalendar },
  data() {
    return {
      date: null
    };
  }
};
</script>

RTL Support (Arabic)

<template>
  <HijriGregorianCalendar
    v-model="date"
    calendar="hijri"
    locale="ar"
    placeholder="اختر التاريخ"
  />
</template>

<script>
import { HijriGregorianCalendar } from '@sherifnabil/hijri-gregorian-calendar-vue2';
import '@sherifnabil/hijri-gregorian-calendar-vue2/styles';

export default {
  components: { HijriGregorianCalendar },
  data() {
    return {
      date: null
    };
  }
};
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | CalendarDate \| DateRange \| null | null | Selected date or range | | calendar | 'gregorian' \| 'hijri' | 'gregorian' | Calendar type to use | | locale | string | 'en' | Locale code ('en' or 'ar') | | range | boolean | false | Enable date range selection | | time | boolean | false | Include time picker (reserved for future) | | placeholder | string | 'Select date' | Input placeholder text | | ariaLabel | string | 'Date picker' | ARIA label for accessibility | | clearable | boolean | true | Show clear button when date is selected | | format | string | 'dd/MM/yyyy' | Display format for the selected date | | inputFormat | string \| null | null | Input format (if different from display format) | | editable | boolean | false | Allow manual input editing with validation | | minDate | CalendarDate \| null | null | Minimum selectable date | | maxDate | CalendarDate \| null | null | Maximum selectable date | | disabledDates | CalendarDate[] | [] | Array of dates to disable | | disabledDaysOfWeek | number[] | [] | Array of day indices to disable (0 = Sunday, 6 = Saturday) | | inputClass | string | '' | Additional CSS classes for the input element |

Events

| Event | Payload | Description | |-------|---------|-------------| | input | CalendarDate \| DateRange \| null | Emitted when date changes (for v-model) | | change | CalendarDate \| DateRange \| null | Emitted when date changes |

Types

interface CalendarDate {
  year: number;
  month: number;  // 1-indexed (1-12)
  day: number;    // 1-indexed
}

interface DateRange {
  start: CalendarDate | null;
  end: CalendarDate | null;
}

Styling

Import the default styles:

import '@sherifnabil/hijri-gregorian-calendar-vue2/styles';

Requirements

• Vue 2.7.0 or higher
• @sherifnabil/hijri-gregorian-calendar-core (peer dependency)

Documentation

For complete documentation, examples, and API reference, visit the main repository.

License

MIT