A Vue 2 component for selecting dates in the Nepali calendar (Bikram Sambat).
- Vue 2 implementation
- Nepali (BS) calendar date picker with clean UI
- Support for date conversion between AD and BS
- Year and month selection
- Today highlighting
- Keyboard accessibility
npm install nepali-datepicker-vue2
Make sure to import the CSS styles in your main entry file (e.g., main.ts
or main.js
):
import 'nepali-datepicker-vue2/main.css';
<template>
<div class="app-container">
<NepaliDatepicker
v-model="selectedDate"
placeholder="Select a date"
classValue="custom-datepicker"
/>
</div>
</template>
<script>
import NepaliDatepicker from "nepali-datepicker-vue2";
export default {
components: {
NepaliDatepicker,
},
data() {
return {
selectedDate: "",
};
},
};
</script>
Prop | Type | Default | Description |
---|---|---|---|
modelValue |
String |
'' |
v-model binding for the selected date (YYYY-MM-DD format) |
yearSelect |
Boolean |
true |
Enable/disable year selection |
monthSelect |
Boolean |
true |
Enable/disable month selection |
classValue |
String |
'' |
Additional CSS class for the input element |
placeholder |
String |
'' |
Placeholder text for the input element |
Event | Description |
---|---|
@onSelect |
Called when date is selected |
The component supports all modern browsers that are compatible with Vue 2.
MIT License