Vue Tailwind Datepicker

A Datepicker component for Vue 3 using Tailwind and dayjs.

Documentation

Go to full documentation

Installation

⚠️ Vue Tailwind Datepicker uses Tailwind CSS (with the @tailwindcss/forms plugin) & Day.js under the hood, you must install those packages before. You can follow this tutorial.

Install via npm

npm install vue-tailwind-datepicker

Install via yarn

yarn add vue-tailwind-datepicker

Simple Usage

How it works,

<script setup>
import { ref } from "vue";
import VueTailwindDatepicker from "vue-tailwind-datepicker";

const dateValue = ref([]);
const formatter = ref({
  date: "DD MMM YYYY",
  month: "MMM",
});
</script>

<template>
  <div>
    <vue-tailwind-datepicker :formatter="formatter" v-model="dateValue" />
  </div>
</template>

Theming options

Light Mode

Dark Mode

Changelog

All notable changes to this project will be documented in the Releases Page.

Sponsor

• tailwindai.dev

License

The MIT License. Please see for more information.

Thanks to

• kenhyuwa
• Vue
• Tailwind CSS
• day.js
• and other support...

1.6.5 (2024-02-05)

:repeat: Chore

• update gh token (ea501c7)

1.6.3 (2024-02-05)

:repeat: Chore

• update release (c325818)

1.6.2 (2024-01-31)

Bug Fixes

• export types (5f6173c)

1.6.1 (2023-10-12)

Bug Fixes

• version: fix version (edc239c)

1.6.0 (2023-10-12)

Bug Fixes

• shortcuts: update css to fix visual glitch when picker use as-single use-range at the same time (90c96ff)

Features

• typing: add event typing and refactor locale loading (2445527)

1.5.4 (2023-10-12)

Bug Fixes

• release: add build step (1a2edf7)

1.0.1 (2023-10-12)

Bug Fixes

• release: git plugins (ce26f42)