taqwim-vue

Installation

npm install taqwim-vue

Usage

<script setup>
import { DatePicker } from 'taqwim-vue'

const date = ref({ hy: 1446, hm: 1, hd: 1 })
</script>

<template>
  <DatePicker v-model="date" />
</template>

Props

| Name | Description | Type | Default | | ------------------ | ----------------------------------------------- | ------------------------------------------------------------------------- | ---------------------------- | | viewMode | The initial view mode of the date picker. | ViewMode ('month', 'months', 'years') | 'month' | | locale | Locale to use for formatting and parsing. | string | 'en' | | modelValue | The current date value in Hijri format. | ValidHijriDate | current Hijri date | | formattedValue | The formatted date value as a string. | string | current Hijri date formatted | | format | The format string used for the date. | string | 'iYYYY/iMM/iD' | | title | Title of the date picker, displayed at the top. | string | '' | | weekDayFormat | Format for displaying weekdays. | WeekDayFormat ('weekDaysMedium', 'weekDaysLong', 'weekDaysShort') | 'weekDaysMedium' | | monthFormat | Format for displaying months. | MonthFormat ('monthsMedium', 'monthsLong', 'monthsShort') | 'monthsMedium' | | showAdjacentDays | Whether to show dates from adjacent months. | boolean | true |

Events

| Name | Description | Payload | | ---- | ----------- | ------- |

Slots

| Name | Description | Slot Props | | ---------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | title | Custom content for the title area. | | | header | Custom content for the header area, typically showing the selected date. | | | controls | Custom content for the date picker controls, including navigation buttons. | | | month | Custom content for the month navigation control. | { date: HijriDateObject, locale: string, changeMode: Function } | | mode | Custom content for the mode toggle button (month/year view). | { date: HijriDateObject, locale: string, changeMode: Function, viewMode: ViewMode } | | prev | Custom content for the previous month navigation button. | { prevMonth: Function } | | next | Custom content for the next month navigation button. | { nextMonth: Function } | | weekdays | Custom content for displaying weekdays. | { weekdays: string[] } | | days | Custom content for displaying days in the month view. | { days: { date: HijriDateObject, dayInMonth: number, isAdjacent: boolean, isToday: boolean, isSelected: boolean }[] } | | months | Custom content for displaying months in the year view. | { months: string[] } | | years | Custom content for displaying years in the decade view. | { years: number[] } |