Vue DatepickerModern Date Picker

Quick Installation ​

pnpm add @tiaohsun/vue-datepicker

npm install @tiaohsun/vue-datepicker

yarn add @tiaohsun/vue-datepicker

Simple Usage ​

<template>
  <div>
    <!-- Basic date picker -->
    <DatePicker v-model="selectedDate" />

    <!-- Date picker with time -->
    <DatePicker v-model="selectedDateTime" :showTime="true" theme="violet" />

    <!-- Republic of China calendar date picker -->
    <DatePicker v-model="rocDate" calendar="roc" locale="zh-TW" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DatePicker } from "@tiaohsun/vue-datepicker";

const selectedDate = ref(null);
const selectedDateTime = ref(null);
const rocDate = ref(null);
</script>

Key Features ​

🎯 Multiple Output Formats ​

Support for ISO strings, JavaScript Date objects, custom formats and other output methods.

🛡️ Powerful Validation Mechanism ​

Built-in date range validation, format validation, required validation with complete error handling.

🎪 Rich Customization Options ​

From basic date formats to complex calendar plugins, meeting various usage scenarios.

🚀 Modern Technology Stack ​

Vue 3 + TypeScript + Tailwind CSS + @internationalized/date + dayjs

Browser Support ​

• Chrome >= 88
• Firefox >= 78
• Safari >= 14
• Edge >= 88

Community & Support ​