Vue 3 Nepali Date Picker is a lightweight wrapper around Nepali Date Picker by @Sajanm. It provides an elegant UI for the end users to input nepali date.
Without year/month select
With Year/Month Select
Disabled dates
English Language
Code Sandbox: https://codesandbox.io/s/vue-nepali-date-picker-playground-br3cuu
- Vue : This library is directly depended on Vue3
npm
npm i vue-nepali-date-picker
yarn
yarn add vue-nepali-date-picker
- Inject the styles, preferabbly in App.vue
import 'vue-nepali-date-picker/dist/style.css';
- Import component and use it in your app
import { VNepaliDatePicker } from 'vue-nepali-date-picker';
...
<VNepaliDatePicker v-model="date" v-model:nepali-date="nepaliDateString"
:allow-clear="allowClear"
:allowed-past-days="allowedPastDays"
:allowed-future-days="allowedFutureDays"
:input-classes="inputClasses"
:nepali-date-format="inputDateFormat"
:year-select="yearSelect"
:month-select="monthSelect"
:year-count="yearCount"
:max="max"
:min="min"
:language="language"
>
<template #clear-btn="{onClear}">
<span class="clear-btn" @click.prevent="onClear">
❌
</span>
</template>
</VNepaliDatePicker>
View Props usage documentation at Docs
There were some issues with using the package as is. The package does not provide source code and just provides a minified version of js and css. We needed to make some changes to the files there as the current files were not compatible with our usage.
So the minified version of the source code were unminified and then placed in this repository with minor adjustments. This is purely to make sure this library works and there is no ill intent here.
Huge props to the library for making this possible.
Since TypeScript cannot handle type information for .vue
imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue
imports (for example to get props validation when using manual h(...)
calls), you can enable Volar's Take Over mode by following these steps:
- Run
Extensions: Show Built-in Extensions
from VS Code's command palette, look forTypeScript and JavaScript Language Features
, then right click and selectDisable (Workspace)
. By default, Take Over mode will enable itself if the default TypeScript extension is disabled. - Reload the VS Code window by running
Developer: Reload Window
from the command palette.
You can learn more about Take Over mode here.