0.0.5 • Published 12 months ago
taqwim-vue v0.0.5
taqwim-vue
Installation
npm install taqwim-vueUsage
<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[] } |
0.0.5
12 months ago
0.0.4
12 months ago
0.0.3
12 months ago
0.0.1
12 months ago
0.0.1-beta.1
12 months ago
0.0.1-beta.0
12 months ago