nepali-datepicker-vue

Nepali Date Picker (Vue 3) 🇳🇵

A professional, feature-rich Nepali (Bikram Sambat) date picker component for Vue 3. Built with modern Composition API and TypeScript, providing a seamless and accessible date selection experience.

📚 Full Documentation

For advanced usage, examples, and full API reference, visit the official documentation: 👉 https://nepalidatepicker.sandip-ghimire.com.np/

✨ Features

• Vue 3 Optimized: Built specifically for Vue 3 using the Composition API.
• Smart Positioning: Automatically detects viewport space to position the calendar above or below the input.
• Teleport Rendering: Renders the calendar popup at the body level to avoid clipping by parent containers.
• Date Constraints: Support for minDate and maxDate restrictions.
• Interactive Formatting: Auto-formats input as you type (YYYY-MM-DD).
• Rich UI: Highlighting for Today, Saturdays, and out-of-range dates.
• TypeScript Support: Full type definitions included for a better developer experience.
• Highly Customizable: Easily override styles with custom CSS classes.

🚀 Installation

npm install nepali-datepicker-vue
# or
pnpm add nepali-datepicker-vue

Import Styles

Import the required CSS in your entry file (e.g., main.ts or App.vue):

import "nepali-datepicker-vue/main.css";

📖 Usage

Basic Example

<script setup>
import { ref } from "vue";
import { NepaliDatePicker } from "nepali-datepicker-vue";

const selectedDate = ref("");
</script>

<template>
  <NepaliDatePicker v-model="selectedDate" placeholder="Select Nepali Date" />
</template>

With Date Range

<template>
  <NepaliDatePicker v-model="date" minDate="2080-01-01" maxDate="2085-12-30" />
</template>

🛠 Props

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © Sandip Ghimire