vue-datepicker

Vue/tailwind datepicker component. See demo here and source here.

Install

npm i @arxzur/vue-datepicker

Basic usage

Import component styles

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import "@arxzur/vue-datepicker/dist/index.css";

createApp(App).mount("#app");

Import Vue component

// App.vue
<script setup lang="ts">
import { VueDatepicker } from "@arxzur/vue-datepicker"

</script>

<template>
  <VueDatepicker />
</template>

Available props

const props = withDefaults(defineProps<{
  hasEventButton?: boolean
  hasWeekNumbers?: boolean
  hasYear?: boolean
  weekdayNames?: string[]
  eventButtonName?: string
}>(), {
  hasEventButton: true,
  hasWeekNumbers: true,
  hasYear: false,
  weekdayNames: () => ["M", "T", "W", "T", "F", "S", "S"],
  eventButtonName: "Add event",
})

Events emitted

// App.vue
<script setup lang="ts">
import VueDatepicker from "./components/VueDatepicker.vue"

function selectDate(date: string) {
  console.log(date) // YYYY-MM-DD
}

function addEvent() {
  console.log("Button clicked!")
}
</script>

<template>
  <VueDatepicker @select-date="selectDate" @add-event="addEvent"/>
</template>

Contribute

For contact, bug reports see repo here.

Compile and Hot-Reload for Development

npm run dev

Build in library mode

npm run build:lib

Run Unit Tests with Vitest

npm run test:run

Licence

This component is open-sourced software licensed under the MIT license.