1.1.0 • Published 4 months ago

nepali-datepicker-vue v1.1.0

Weekly downloads
-
License
MIT
Repository
-
Last release
4 months ago

Nepali Date Picker

A Vue 3 component for selecting dates in the Nepali calendar (Bikram Sambat).

Features

  • Pure Vue 3 Composition API 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

npm install vue-nepali-datepicker

Dependency

Usage

Import Styles

Make sure to import the CSS styles in your main entry file (e.g., main.ts or main.js):

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

Initialization Example

<template>
  <div>
    <h3>Nepali Date Picker</h3>
    <NepaliDatePicker v-model="selectedDate" placeholder="Select a date" />
    <p v-if="selectedDate">Selected date: {{ selectedDate }}</p>
  </div>
</template>

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

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

Props

PropTypeDefaultDescription
modelValueString''v-model binding for the selected date (YYYY-MM-DD format)
yearSelectBooleantrueEnable/disable year selection
monthSelectBooleantrueEnable/disable month selection
classValueString''Additional CSS class for the input element
placeholderString''Placeholder text for the input element

Events

EventDescription
@onSelectCalled when date is selected

Browser Support

The component supports all modern browsers that are compatible with Vue 3.

License

MIT License