- Single date picker
- Range date picker
- Month picker
- Year picker
- Locale support
- Start week on Sunday or Monday
- Full style configuration for input and calendar
- Dark and light theme
- Accessibility
- Type definitions
# npm npm install @softechub-ib/vue-datepicker # yarn yarn add @softechub-ib/vue-datepicker # pnpm pnpm add @softechub-ib/vue-datepicker # bun bun add @softechub-ib/vue-datepickerGlobal
import { createApp } from "vue"; import App from "./App.vue"; import VueDatePicker from "@softechub-ib/vue-datepicker"; import "@softechub-ib/vue-datepicker/dist/style.css"; const app = createApp(App); app.component("VueDatePicker", VueDatePicker); app.mount("#app");Local
<script setup> import { ref } from "vue"; import VueDatePicker from "@softechub-ib/vue-datepicker"; import "@softechub-ib/vue-datepicker/dist/style.css"; const date = ref(); </script> <template> <VueDatePicker v-model="date" /> </template>Types
import type { CalendarStylesProp, // calendar-styles DateValue, // min, max, model-value (DateValue | DateValue[]) DayjsLocale, // locale InputStylesProp, // input-styles Size, // size } from "@softechub-ib/vue-datepicker";| Prop | Required | Type | Default value |
|---|---|---|---|
| model-value | yes | string | number | Date | null | undefined | (string | number | Date | null | undefined)[] | |
| range | no | boolean | false |
| month-picker | no | boolean | false |
| year-picker | no | boolean | false |
| size | no | "small" | "medium" | "large" | "medium" |
| name | no | string | "datepicker-input" |
| placeholder | no | string | undefined |
| locale | no | DayjsLocale (union type of key values from the link) | "en" |
| start-week-on-monday | no | boolean | false |
| hide-today-mark | no | boolean | false |
| clearable | no | boolean | true |
| disabled | no | boolean | false |
| error | no | boolean | false |
| dark | no | boolean | false |
| min | no | string | number | Date | null | undefined | undefined |
| max | no | string | number | Date | null | undefined | undefined |
| input-styles | no | InputStylesProp | defaultInputStyles |
| calendar-styles | no | CalendarStylesProp | defaultCalendarStyles |
InputStylesProp
Each prop of InputStylesProp can be changed, but it is optional. At the end, custom styles will be merged with defaultInputStyles.
type Unit = "%" | "px" | "em" | "rem"; type InputStylesProp = { container?: { border?: string; hoverBorder?: string; borderRadius?: `${number}${Unit}`; backgroundColor?: string; small?: { paddingX?: `${number}${Unit}`; paddingY?: `${number}${Unit}`; calendarIcon?: { size?: `${number}${Unit}`; }; clearIcon?: { size?: `${number}${Unit}`; }; }; medium?: { paddingX?: `${number}${Unit}`; paddingY?: `${number}${Unit}`; calendarIcon?: { size?: `${number}${Unit}`; }; clearIcon?: { size?: `${number}${Unit}`; }; }; large?: { paddingX?: `${number}${Unit}`; paddingY?: `${number}${Unit}`; calendarIcon?: { size?: `${number}${Unit}`; }; clearIcon?: { size?: `${number}${Unit}`; }; }; disabled?: { opacity?: `${number}`; }; error?: { borderColor?: string; backgroundColor?: string; }; }; selection?: { calendarIcon?: { color?: string; marginRight?: `${number}${Unit}`; }; clearIcon?: { color?: string; marginLeft?: `${number}${Unit}`; }; }; input?: { fontSize?: `${number}${Unit}`; lineHeight?: `${number}${Unit}`; color?: string; }; calendarWrapper?: { zIndex?: `${number}`; }; };CalendarStylesProp
Each prop of CalendarStylesProp can be changed, but it is optional. At the end, custom styles will be merged with defaultCalendarStyles.
type Unit = "%" | "px" | "em" | "rem"; type CalendarStylesProp = { container?: { width?: `${number}px`; paddingX?: `${number}${Unit}`; paddingY?: `${number}${Unit}`; border?: string; borderRadius?: `${number}${Unit}`; backgroundColor?: string; boxShadow?: string; }; header?: { marginBottom?: `${number}${Unit}`; }; headerButton?: { padding?: `${number}${Unit}`; color?: string; border?: string; borderRadius?: `${number}${Unit}`; backgroundColor?: string; hoverBackgroundColor?: string; iconSize?: `${number}${Unit}`; restricted?: { opacity?: `${number}`; }; }; headerDateItem?: { fontSize?: `${number}${Unit}`; fontWeight?: `${number}`; lineHeight?: `${number}${Unit}`; color?: string; paddingX?: string; paddingY?: string; borderRadius?: `${number}${Unit}`; hoverBackgroundColor?: string; }; table?: { fontSize?: `${number}${Unit}`; gap?: `${number}${Unit}`; }; tableHead?: { fontWeight?: `${number}`; }; tableHeadItem?: { color?: string; }; tableBody?: { fontWeight?: `${number}`; }; tableBodyRow?: { days?: { marginTop?: `${number}${Unit}`; }; monthsYears?: { marginBottom?: `${number}${Unit}`; }; }; tableBodyItem?: { borderRadius?: `${number}${Unit}`; color?: string; hoverBackgroundColor?: string; offset?: { color?: string; hoverColor?: string; opacity?: `${number}`; }; current?: { border?: string; }; restricted?: { color?: string; opacity?: `${number}`; }; selected?: { color?: string; backgroundColor?: string; }; }; };calendarIcon(Input calendar icon)clearIcon(Input clear icon)leftHeaderButtonIcon(Calendar left header button icon)rightHeaderButtonIcon(Calendar right header button icon)
Maintaining an open-source project is a time-consuming job. Your support is very appreciated ❤️
Please ⭐️ this repository if you like the component.
You can also make a financial contribution via sponsoring this project or one time donation → become a sponsor.
Copyright © 2024-present softechub-ib