@softechub-ib/vue-datepicker

Datepicker solution for Vue 3 that offers:

• 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

Playground

Datepicker Playground

Install

# 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-datepicker

Import and register component

Global

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";

Props

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;
    };
  };
};

Slots

• calendarIcon (Input calendar icon)
• clearIcon (Input clear icon)
• leftHeaderButtonIcon (Calendar left header button icon)
• rightHeaderButtonIcon (Calendar right header button icon)

Supporting the project

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.

License

Copyright © 2024-present softechub-ib

MIT