UNPKG

nepali-datepicker-vue2

Version:

A Vue 2 Nepali Datepicker

84 lines (63 loc) 1.8 kB
# Nepali Date Picker A Vue 2 component for selecting dates in the Nepali calendar (Bikram Sambat). ## Features - 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 ## Installation ```bash npm install nepali-datepicker-vue2 ``` ## Dependency - [Vue](https://vuejs.org/) - [Nepali Date Library](https://www.npmjs.com/package/nepali-date-library) ## Usage ## Import Styles Make sure to import the CSS styles in your main entry file (e.g., `main.ts` or `main.js`): ```ts import 'nepali-datepicker-vue2/main.css'; ``` ## Initialization Example ```vue <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> ``` ## Props | 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 | ## Events | Event | Description | |------|-------------| | `@onSelect` | Called when date is selected | ## Browser Support The component supports all modern browsers that are compatible with Vue 2. ## License MIT License