@pr0vin/np-date-picker-vue-tw

A Nepali Date Picker component for Vue 3 using Tailwind CSS.
Easy to use, lightweight, and fully compatible with modern Vue 3 projects.

Features

• Supports Nepali (Bikram Sambat) calendar
• Fully responsive and Tailwind CSS styled
• Highlight today's date
• Works with v-model
• Keyboard and mouse friendly
• Easily customizable font & size using Tailwind

Installation

Install via npm or yarn:

npm install @pr0vin/np-date-picker-vue-tw
# or
yarn add @pr0vin/np-date-picker-vue-tw

Usage

Basic Example

<script setup>
import { ref } from "vue";
import "@pr0vin/np-date-picker-vue-tw/dist/np-date-picker-vue-tw.css";
import { NepaliDatePicker } from "@pr0vin/np-date-picker-vue-tw";

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

<template>
  <NepaliDatePicker
    v-model="selectedDate"
    placeholder="Select a date"
    :todayValue="true"
  />
</template>

Props

| Prop | Type | Default | Description | | ------------- | ------- | ----------------- | -------------------------------------- | | modelValue | String | "" | The selected date in YYYY-MM-DD | | placeholder | String | "Select a date" | Input placeholder text | | todayValue | Boolean | false | Select today's date by default if true |

Events

| Event | Arguments | Description | | ------------------- | -------------------- | --------------------------------- | | update:modelValue | (newValue: string) | Emits the selected date on change |

Customization

You can override Tailwind classes to adjust calendar size, font, colors, etc.

<NepaliDatePicker class="np-text-xs np-w-40" />

You can also style the input field:

<NepaliDatePicker
  class="np-text-sm np-w-32 np-border np-border-gray-300 np-rounded"
/>

Multiple Components

If you have multiple date pickers on the same page, the component automatically handles focus and closes other open calendars. No extra configuration is required.

Example With Multiple Components

<script setup>
import { ref } from "vue";
import { NepaliDatePicker } from "@pr0vin/np-date-picker-vue-tw";

const date1 = ref("");
const date2 = ref("");
</script>

<template>
  <NepaliDatePicker v-model="date1" placeholder="Select first date" />
  <NepaliDatePicker v-model="date2" placeholder="Select second date" />
</template>

License

ISC © Pravin Chaudhary