@softechub-ib/vue-datepicker NPM

@softechub-ib/vue-datepicker

Downloads

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

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