├── .browserslistrc
├── assets
    ├── demo1.PNG
    ├── demo2.PNG
    ├── demo3.PNG
    ├── demo4.PNG
    ├── demo5.PNG
    └── demo6.PNG
├── dev
    ├── serve.js
    └── serve.vue
├── babel.config.js
├── .gitignore
├── .github
    └── workflows
    │   ├── webpack.yml
    │   └── npm-publish.yml
├── src
    ├── entry.js
    ├── constants.js
    └── v-nepalidatepicker.vue
├── package.json
└── README.md


/.browserslistrc:
--------------------------------------------------------------------------------
1 | current node
2 | last 2 versions and > 2%
3 | ie > 10
4 | 


--------------------------------------------------------------------------------
/assets/demo1.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krijanniroula/v-nepalidatepicker/HEAD/assets/demo1.PNG


--------------------------------------------------------------------------------
/assets/demo2.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krijanniroula/v-nepalidatepicker/HEAD/assets/demo2.PNG


--------------------------------------------------------------------------------
/assets/demo3.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krijanniroula/v-nepalidatepicker/HEAD/assets/demo3.PNG


--------------------------------------------------------------------------------
/assets/demo4.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krijanniroula/v-nepalidatepicker/HEAD/assets/demo4.PNG


--------------------------------------------------------------------------------
/assets/demo5.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krijanniroula/v-nepalidatepicker/HEAD/assets/demo5.PNG


--------------------------------------------------------------------------------
/assets/demo6.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krijanniroula/v-nepalidatepicker/HEAD/assets/demo6.PNG


--------------------------------------------------------------------------------
/dev/serve.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Dev from './serve.vue';
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: (h) => h(Dev),
8 | }).$mount('#app');
9 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | const devPresets = ['@vue/babel-preset-app'];
2 | const buildPresets = ['@babel/preset-env'];
3 | module.exports = {
4 |   presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
5 | };
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/dev/serve.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Vue from 'vue';
 3 | import VNepalidatepicker from '@/v-nepalidatepicker.vue';
 4 | 
 5 | export default Vue.extend({
 6 |   name: 'ServeDev',
 7 |   components: {
 8 |     VNepalidatepicker
 9 |   }
10 | });
11 | </script>
12 | 
13 | <template>
14 |   <div id="app">
15 |     <v-nepalidatepicker />
16 |   </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/.github/workflows/webpack.yml:
--------------------------------------------------------------------------------
 1 | name: NodeJS with Webpack
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ "master" ]
 6 |   pull_request:
 7 |     branches: [ "master" ]
 8 | 
 9 | jobs:
10 |   build:
11 |     runs-on: ubuntu-latest
12 | 
13 |     strategy:
14 |       matrix:
15 |         node-version: [18.x, 20.x, 22.x]
16 | 
17 |     steps:
18 |     - uses: actions/checkout@v4
19 | 
20 |     - name: Use Node.js ${{ matrix.node-version }}
21 |       uses: actions/setup-node@v4
22 |       with:
23 |         node-version: ${{ matrix.node-version }}
24 | 
25 |     - name: Build
26 |       run: |
27 |         npm install
28 |         npx webpack
29 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 2 | # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
 3 | 
 4 | name: Node.js Package
 5 | 
 6 | on:
 7 |   release:
 8 |     types: [created]
 9 | 
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v4
15 |       - uses: actions/setup-node@v4
16 |         with:
17 |           node-version: 20
18 |       - run: npm ci 
19 | 
20 |   publish-npm:
21 |     needs: build
22 |     runs-on: ubuntu-latest
23 |     steps:
24 |       - uses: actions/checkout@v4
25 |       - uses: actions/setup-node@v4
26 |         with:
27 |           node-version: 20
28 |           registry-url: https://registry.npmjs.org/
29 |       - run: npm ci
30 |       - run: npm publish
31 |         env:
32 |           NODE_AUTH_TOKEN: ${{secrets.npm_token}}
33 | 


--------------------------------------------------------------------------------
/src/entry.js:
--------------------------------------------------------------------------------
 1 | // Import vue component
 2 | import component from '@/v-nepalidatepicker.vue';
 3 | 
 4 | // install function executed by Vue.use()
 5 | const install = function installVNepalidatepicker(Vue) {
 6 |   if (install.installed) return;
 7 |   install.installed = true;
 8 |   Vue.component('VNepalidatepicker', component);
 9 | };
10 | 
11 | // Create module definition for Vue.use()
12 | const plugin = {
13 |   install,
14 | };
15 | 
16 | // To auto-install on non-es builds, when vue is found
17 | // eslint-disable-next-line no-redeclare
18 | /* global window, global */
19 | if ('false' === process.env.ES_BUILD) {
20 |   let GlobalVue = null;
21 |   if (typeof window !== 'undefined') {
22 |     GlobalVue = window.Vue;
23 |   } else if (typeof global !== 'undefined') {
24 |     GlobalVue = global.Vue;
25 |   }
26 |   if (GlobalVue) {
27 |     GlobalVue.use(plugin);
28 |   }
29 | }
30 | 
31 | // Inject install function into component - allows component
32 | // to be registered via Vue.use() as well as Vue.component()
33 | component.install = install;
34 | 
35 | // Export component by default
36 | export default component;
37 | 
38 | // It's possible to expose named exports when writing components that can
39 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
40 | // export const RollupDemoDirective = component;
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "v-nepalidatepicker",
 3 |   "version": "1.2.7",
 4 |   "description": "Nepali Date Picker component for Vue js",
 5 |   "main": "dist/v-nepalidatepicker.ssr.js",
 6 |   "browser": "dist/v-nepalidatepicker.esm.js",
 7 |   "module": "dist/v-nepalidatepicker.esm.js",
 8 |   "unpkg": "dist/v-nepalidatepicker.min.js",
 9 |   "files": [
10 |     "dist/*",
11 |     "src/**/*.vue"
12 |   ],
13 |   "scripts": {
14 |     "serve": "vue-cli-service serve dev/serve.js",
15 |     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
16 |     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
17 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
18 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
19 |   },
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git+https://github.com/krijanniroula/v-nepalidatepicker.git"
23 |   },
24 |   "keywords": [
25 |     "nepalidatepicker",
26 |     "v-nepalidatepicker",
27 |     "vue-datepicker",
28 |     "datepicker",
29 |     "nepali",
30 |     "nepalidate",
31 |     "vuenepali",
32 |     "vue nepali datepicker",
33 |     "datepicker nepali",
34 |     "vue nepali"
35 |   ],
36 |   "dependencies": {
37 |     "nepali-date": "^0.1.3"
38 |   },
39 |   "devDependencies": {
40 |     "@babel/core": "^7.9.0",
41 |     "@babel/preset-env": "^7.9.5",
42 |     "@rollup/plugin-alias": "^2.2.0",
43 |     "@rollup/plugin-commonjs": "^11.1.0",
44 |     "@rollup/plugin-replace": "^2.3.2",
45 |     "@vue/cli-plugin-babel": "^4.3.1",
46 |     "@vue/cli-service": "^4.3.1",
47 |     "cross-env": "^7.0.2",
48 |     "minimist": "^1.2.5",
49 |     "rollup": "^2.7.3",
50 |     "rollup-plugin-babel": "^4.4.0",
51 |     "rollup-plugin-terser": "^5.3.0",
52 |     "rollup-plugin-vue": "^5.1.6",
53 |     "vue": "^2.6.11",
54 |     "vue-template-compiler": "^2.6.11"
55 |   },
56 |   "peerDependencies": {
57 |     "vue": "^2.6.11"
58 |   },
59 |   "engines": {
60 |     "node": ">=10"
61 |   },
62 |   "author": "Krijan Niroula",
63 |   "license": "MIT",
64 |   "bugs": {
65 |     "url": "https://github.com/krijanniroula/v-nepalidatepicker/issues"
66 |   },
67 |   "homepage": "https://github.com/krijanniroula/v-nepalidatepicker#readme"
68 | }
69 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # nepali-datepicker-vuejs
  2 | 
  3 | > An easy-to-use and customizable nepali date picker component powered by Vue js
  4 | 
  5 | # Demo: 
  6 | 
  7 | https://codesandbox.io/s/quizzical-banzai-mv19x
  8 | 
  9 | 
 10 | ## Install
 11 | ```shell
 12 | npm install v-nepalidatepicker
 13 | 
 14 | OR
 15 | 
 16 | yarn add v-nepalidatepicker
 17 | ```
 18 | 
 19 | ## Quick Start
 20 | ``` javascript
 21 | import VNepaliDatePicker from 'v-nepalidatepicker';
 22 | 
 23 | export default {
 24 |   components: {
 25 |     VNepaliDatePicker,
 26 |   },
 27 |   // rest of the component
 28 | }
 29 | 
 30 | Or even used via <script> tag in the browser directly:
 31 | 
 32 | <script src="https://unpkg.com/vue"></script>
 33 | <script src="https://unpkg.com/v-nepalidatepicker"></script>
 34 | ...
 35 | <v-nepalidatepicker />
 36 | ...
 37 | 
 38 | ```
 39 | 
 40 | ## Customizable Properties
 41 | 
 42 | The following customizable properties can be added to the component
 43 | 
 44 | 1. classValue 
 45 | 2. calenderType
 46 | 3. placeholder
 47 | 4. format
 48 | 5. value
 49 | 6. yearSelect
 50 | 7. monthSelect
 51 | 
 52 | ## Examples - classValue
 53 | 
 54 | This works exactly as class properties. Eg: classValue="form-control" (boostrap class)
 55 | (Note : In class="form-control", input will be rendered inside another input.)
 56 | 
 57 | ```vue
 58 | <template>
 59 |   <v-nepalidatepicker classValue="datepicker" />
 60 | </template>
 61 | <style>
 62 | .datepicker{
 63 |   width: 50px;
 64 |   height: 20px;
 65 | }
 66 | </style>
 67 | ```
 68 | 
 69 | 
 70 | ## Examples - calenderType
 71 | 
 72 | Date picker is present in nepali language and English nepali language. 
 73 | Default type will be English nepali.
 74 | 
 75 | For nepali language : 
 76 | 
 77 | ```vue
 78 | <template>
 79 |   <v-nepalidatepicker calenderType="Nepali" />
 80 | </template>
 81 | 
 82 | ```
 83 | 
 84 | ## Examples - placeholder
 85 | 
 86 | ```vue
 87 | <template>
 88 |   <v-nepalidatepicker placeholder="YYYY-MM-DD" />
 89 | </template>
 90 | 
 91 | ```
 92 | 
 93 | ## Examples - format
 94 | 
 95 | Format the date to provide various output based on format string
 96 | 
 97 | ```vue
 98 | 
 99 | 'yyyy-mm-dd' => २०७५-०२-०१
100 | 'YYY-MM-DD' => 075-02-01
101 | 'mmmm d, yyyy ddd' => जेष्ठ १, २०७५ मंगल
102 | 'MMM D, YYYY DDD' => Jes 1, 2075 Tue
103 | 
104 | ```
105 | 
106 | ```vue
107 | 
108 | YYYY - 4 digit of year (2075)
109 | yyyy - 4 digit of year in nepali unicode (२०७५)
110 | YYY  - 3 digit of year (075)
111 | yyy  - 3 digit of year (०७५)
112 | YY   - 2 digit of year
113 | yy   - 2 digit of year in nepali unicode (७५)
114 | M    - month number (1 - 12)
115 | m    - month number (१ - १२) in nepali unicode
116 | MM   - month number with 0 padding (01 - 12)
117 | mm   - month number in nepali unicode with 0 padding - (०१-१२)
118 | MMM  - short month name (Bai, Jes, Asa, Shr, etc.)
119 | mmm  - short month name in nepali unicde (ब‍ै, जे, अ, श्रा, etc)
120 | MMMM - full month name (Baisakh, Jestha, Asar, ...)
121 | mmmm - full month name nepali (बैसाख, जेष्ठ, ...)
122 | D    - Day of Month (1, 2, ... 31, 32)
123 | d    - Day of Month in Nepali unicode (१, २, ३ ... ३१, ३२)
124 | DD   - Day of Month with zero padding (01, 02, ...)
125 | dd   - Day of Month with zero padding in Nepali unicode (०१, ०२, ...)
126 | DDD  - Day of Week short form (Sun, Mon, Tue, ...)
127 | ddd  - Day of week in short form nepali (आइत, सोम, ...)
128 | DDDD - Day of week full form (Sunday, Monday, Tuesday, ...)
129 | dddd - Day of week full form nepali (आइतबार, सोमबार, ...)
130 | 
131 | ```
132 | 
133 | ```vue
134 | <template>
135 |   <v-nepalidatepicker format="YYYY-MM-DD" />
136 | </template>
137 | 
138 | ```
139 | 
140 | ## Examples - value
141 | 
142 | Initial value for the datepicker.
143 | 
144 | ```vue
145 | <template>
146 |   <v-nepalidatepicker value="2053-09-19" />
147 | </template>
148 | 
149 | ```
150 | 
151 | ## Examples - yearSelect
152 | 
153 | The dropdown year select can be turned off using boolean type to yearSelect
154 | 
155 | ```vue
156 | <template>
157 |   <v-nepalidatepicker :yearSelect="false" />
158 | </template>
159 | 
160 | ```
161 | 
162 | ## Examples - monthSelect
163 | 
164 | The dropdown month select can be turned off using boolean type to monthSelect
165 | 
166 | ```vue
167 | <template>
168 |   <v-nepalidatepicker :monthSelect="false" />
169 | </template>
170 | 
171 | ```
172 | 
173 | ## Examples - All in one
174 | 
175 | ```vue
176 | <template>
177 |   <v-nepalidatepicker calenderType="Nepali" placeholder="YYYY-MM-DD" format="YYYY-MM-DD" value="2053-09-19" :yearSelect="false" :monthSelect="false" />
178 | </template>
179 | 
180 | ```
181 | 


--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
  1 | export const YEAR_DATES = [
  2 |     { year: 2000, value: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31] },
  3 |     { year: 2001, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
  4 |     { year: 2002, value: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
  5 |     { year: 2003, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
  6 |     { year: 2004, value: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31] },
  7 |     { year: 2005, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
  8 |     { year: 2006, value: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
  9 |     { year: 2007, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 10 |     { year: 2007, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 11 |     { year: 2008, value: [31, 31, 31, 32, 31, 31, 29, 30, 30, 29, 29, 31] },
 12 |     { year: 2009, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 13 |     { year: 2010, value: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
 14 |     { year: 2011, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 15 |     { year: 2012, value: [31, 31, 31, 32, 31, 31, 29, 30, 30, 29, 30, 30] },
 16 |     { year: 2013, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 17 |     { year: 2014, value: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
 18 |     { year: 2015, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 19 |     { year: 2016, value: [31, 31, 31, 32, 31, 31, 29, 30, 30, 29, 30, 30] },
 20 |     { year: 2017, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 21 |     { year: 2018, value: [31, 32, 31, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
 22 |     { year: 2019, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31] },
 23 |     { year: 2020, value: [31, 31, 31, 32, 31, 31, 30, 29, 30, 29, 30, 30] },
 24 |     { year: 2021, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 25 |     { year: 2022, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 30] },
 26 |     { year: 2023, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31] },
 27 |     { year: 2024, value: [31, 31, 31, 32, 31, 31, 30, 29, 30, 29, 30, 30] },
 28 |     { year: 2025, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 29 |     { year: 2026, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 30 |     { year: 2027, value: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31] },
 31 |     { year: 2028, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 32 |     { year: 2029, value: [31, 31, 32, 31, 32, 30, 30, 29, 30, 29, 30, 30] },
 33 |     { year: 2030, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 34 |     { year: 2031, value: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31] },
 35 |     { year: 2032, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 36 |     { year: 2033, value: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
 37 |     { year: 2034, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 38 |     { year: 2035, value: [30, 32, 31, 32, 31, 31, 29, 30, 30, 29, 29, 31] },
 39 |     { year: 2036, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 40 |     { year: 2037, value: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
 41 |     { year: 2038, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 42 |     { year: 2039, value: [31, 31, 31, 32, 31, 31, 29, 30, 30, 29, 30, 30] },
 43 |     { year: 2040, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 44 |     { year: 2041, value: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
 45 |     { year: 2042, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 46 |     { year: 2043, value: [31, 31, 31, 32, 31, 31, 29, 30, 30, 29, 30, 30] },
 47 |     { year: 2044, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 48 |     { year: 2045, value: [31, 32, 31, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
 49 |     { year: 2046, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 50 |     { year: 2047, value: [31, 31, 31, 32, 31, 31, 30, 29, 30, 29, 30, 30] },
 51 |     { year: 2048, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 52 |     { year: 2049, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 30] },
 53 |     { year: 2050, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31] },
 54 |     { year: 2051, value: [31, 31, 31, 32, 31, 31, 30, 29, 30, 29, 30, 30] },
 55 |     { year: 2052, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 56 |     { year: 2053, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 30] },
 57 |     { year: 2054, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31] },
 58 |     { year: 2055, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 59 |     { year: 2056, value: [31, 31, 32, 31, 32, 30, 30, 29, 30, 29, 30, 30] },
 60 |     { year: 2057, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 61 |     { year: 2058, value: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31] },
 62 |     { year: 2059, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 63 |     { year: 2060, value: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
 64 |     { year: 2061, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 65 |     { year: 2062, value: [30, 32, 31, 32, 31, 31, 29, 30, 29, 30, 29, 31] },
 66 |     { year: 2063, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 67 |     { year: 2064, value: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
 68 |     { year: 2065, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 69 |     { year: 2066, value: [31, 31, 31, 32, 31, 31, 29, 30, 30, 29, 29, 31] },
 70 |     { year: 2067, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 71 |     { year: 2068, value: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
 72 |     { year: 2069, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 73 |     { year: 2070, value: [31, 31, 31, 32, 31, 31, 29, 30, 30, 29, 30, 30] },
 74 |     { year: 2071, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 75 |     { year: 2072, value: [31, 32, 31, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
 76 |     { year: 2073, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31] },
 77 |     { year: 2074, value: [31, 31, 31, 32, 31, 31, 30, 29, 30, 29, 30, 30] },
 78 |     { year: 2075, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 79 |     { year: 2076, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 30] },
 80 |     { year: 2077, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31] },
 81 |     { year: 2078, value: [31, 31, 31, 32, 31, 31, 30, 29, 30, 29, 30, 30] },
 82 |     { year: 2079, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30] },
 83 |     { year: 2080, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 30] },
 84 |     { year: 2081, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31] },
 85 |     { year: 2082, value: [31, 31, 31, 32, 31, 31, 30, 29, 30, 29, 30, 30] },
 86 |     { year: 2083, value: [31, 31, 32, 31, 31, 30, 30, 30, 29, 30, 30, 30] },
 87 |     { year: 2084, value: [31, 31, 32, 31, 31, 30, 30, 30, 29, 30, 30, 30] },
 88 |     { year: 2085, value: [31, 32, 31, 32, 30, 31, 30, 30, 29, 30, 30, 30] },
 89 |     { year: 2086, value: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 30, 30] },
 90 |     { year: 2087, value: [31, 31, 32, 31, 31, 31, 30, 30, 29, 30, 30, 30] },
 91 |     { year: 2088, value: [30, 31, 32, 32, 30, 31, 30, 30, 29, 30, 30, 30] },
 92 |     { year: 2089, value: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 30, 30] },
 93 |     { year: 2090, value: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 30, 30] },
 94 |     { year: 2091, value: [31, 31, 32, 31, 31, 31, 30, 30, 29, 30, 30, 30] },
 95 |     { year: 2092, value: [30, 31, 32, 32, 31, 30, 30, 30, 29, 30, 30, 30] },
 96 |     { year: 2093, value: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 30, 30] },
 97 |     { year: 2094, value: [31, 31, 32, 31, 31, 30, 30, 30, 29, 30, 30, 30] },
 98 |     { year: 2095, value: [31, 31, 32, 31, 31, 31, 30, 29, 30, 30, 30, 30] },
 99 |     { year: 2096, value: [30, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30] },
100 |     { year: 2097, value: [31, 32, 31, 32, 31, 30, 30, 30, 29, 30, 30, 30] },
101 |     { year: 2098, value: [31, 31, 32, 31, 31, 31, 29, 30, 29, 30, 29, 31] },
102 |     { year: 2099, value: [31, 31, 32, 31, 31, 31, 30, 29, 29, 30, 30, 30] },
103 | ];
104 | 
105 | export const ENGLISH_WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
106 | 
107 | export const NEPALI_WEEK = ["आइत", "सोम", "मंगल", "बुध", "बिहि", "शुक्र", "शनि"];
108 | 
109 | export const ENGLISH_NEPALI_MONTH = [
110 |     "Baisakh",
111 |     "Jestha",
112 |     "Asar",
113 |     "Shrawan",
114 |     "Bhadra",
115 |     "Aswin",
116 |     "Kartik",
117 |     "Mangsir",
118 |     "Poush",
119 |     "Magh",
120 |     "Falgun",
121 |     "Chaitra",
122 | ];
123 | 
124 | export const NEPALI_MONTH = [
125 |     "बैशाख",
126 |     "जेठ",
127 |     "असार",
128 |     "श्रावण",
129 |     "भाद्र",
130 |     "आश्विन",
131 |     "कार्तिक",
132 |     "मंसिर",
133 |     "पौष",
134 |     "माघ",
135 |     "फाल्गुण",
136 |     "चैत्र",
137 | ]


--------------------------------------------------------------------------------
/src/v-nepalidatepicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="datepicker" @click.stop>
  3 |     <input
  4 |       type="text"
  5 |       :class="this.classValue"
  6 |       v-model="formatedValue"
  7 |       @focus="show()"
  8 |       :placeholder="this.placeholder"
  9 |     />
 10 |     <div v-if="visible" :class="['calendar', { show: visible }]">
 11 |       <div class="calendar__header">
 12 |         <div class="calendar__year">{{ formatedYear }}</div>
 13 |         <div class="calendar__date">{{ formatedDate }}</div>
 14 |       </div>
 15 |       <div class="calendar__body">
 16 |         <!-- month -->
 17 |         <div class="calendar__month">
 18 |           <button class="calendar__month__prev" @click="prev()">
 19 |             <b>></b>
 20 |           </button>
 21 |           <span>{{ formatedYearOrMonth }}</span>
 22 |           <select
 23 |             @change="monthSelectChange"
 24 |             v-model="monthValue"
 25 |             size="mini"
 26 |             v-if="this.monthSelect"
 27 |             style=" "
 28 |           >
 29 |             <option
 30 |               style="text-align-last:center"
 31 |               v-for="(month, index) in getMonthsList"
 32 |               :key="month"
 33 |               :label="month"
 34 |               :value="index"
 35 |             >
 36 |               <!-- {{ month }} -->
 37 |             </option>
 38 |           </select>
 39 |           <select
 40 |             @change="yearSelectChange"
 41 |             v-model="yearValue"
 42 |             size="mini"
 43 |             v-if="this.yearSelect"
 44 |             style="margin-left:5px"
 45 |           >
 46 |             <option
 47 |               style="text-align-last:center"
 48 |               v-for="i in numberofYears"
 49 |               :key="i"
 50 |               :value="startingYear + (i - 1)"
 51 |               :label="
 52 |                 formatNepali
 53 |                   ? getNepaliDateWithYear(startingYear + (i - 1)).substr(0, 4)
 54 |                   : startingYear + (i - 1)
 55 |               "
 56 |             >
 57 |             </option>
 58 |           </select>
 59 |           <button icon="el-icon-arrow-right" @click="next()"><b>></b></button>
 60 |         </div>
 61 |         <!-- week days -->
 62 |         <div style="padding:3px">
 63 |           <div class="calendar__weeks">
 64 |             <div
 65 |               style="font-weight: bold;"
 66 |               class="calendar__weekday"
 67 |               v-for="(weekday, w) in weekdays"
 68 |               :key="w"
 69 |             >
 70 |               {{ weekday }}
 71 |             </div>
 72 |           </div>
 73 |           <!-- days of month -->
 74 |           <div class="calendar__days">
 75 |             <div
 76 |               class="calendar__day_spacer"
 77 |               :style="{ gridColumn: `span ${startweek}` }"
 78 |             ></div>
 79 |             <div
 80 |               :class="[
 81 |                 'calendar__day',
 82 |                 { selected: active(day) },
 83 |                 { today: checkToday(day) },
 84 |               ]"
 85 |               v-for="(day, d) in days"
 86 |               :key="d"
 87 |               @click="select(day)"
 88 |             >
 89 |               {{ formatNepali ? convertToNepali(day).substr(8, 10) : day.day }}
 90 |             </div>
 91 |           </div>
 92 |         </div>
 93 |       </div>
 94 |       <div class="calendar__footer">
 95 |         <button @click="today()">{{ formatedTodayText }}</button>
 96 |       </div>
 97 |     </div>
 98 |   </div>
 99 | </template>
100 | 
101 | <script>
102 | import NepaliDate from "nepali-date/cjs/NepaliDate";
103 | import {
104 |   YEAR_DATES,
105 |   ENGLISH_WEEK,
106 |   NEPALI_WEEK,
107 |   NEPALI_MONTH,
108 |   ENGLISH_NEPALI_MONTH,
109 | } from "./constants.js";
110 | export default {
111 |   name: "VNepalidatepicker", // vue component name
112 |   props: {
113 |     value: { type: String, default: "" },
114 |     format: { type: String, default: "YYYY-MM-DD" },
115 |     calenderType: { type: String, default: "English" },
116 |     yearSelect: { type: Boolean, default: true },
117 |     monthSelect: { type: Boolean, default: true },
118 |     classValue: { type: String, default: "" },
119 |     placeholder: { type: String, default: "" },
120 |   },
121 |   model: {
122 |     event: "change",
123 |   },
124 |   data() {
125 |     return {
126 |       date: this.value == "" ? new NepaliDate() : new NepaliDate(this.value),
127 |       formatedValue: this.value,
128 |       visible: false,
129 |       startingYear: 2001,
130 |       numberofYears: 87,
131 |       formatNepali: this.calenderType == "Nepali" ? true : false,
132 |       endDay: null,
133 |       yearValue:
134 |         this.value == ""
135 |           ? new NepaliDate().getYear()
136 |           : new NepaliDate(this.value).getYear(),
137 |       monthValue:
138 |         this.value == ""
139 |           ? new NepaliDate().getMonth()
140 |           : new NepaliDate(this.value).getMonth(),
141 |       startMonthValue: null,
142 |       currentDateValue: undefined,
143 |     };
144 |   },
145 |   computed: {
146 |     getMonthsList() {
147 |       return this.formatNepali ? NEPALI_MONTH : ENGLISH_NEPALI_MONTH;
148 |     },
149 |     year() {
150 |       return this.date.year;
151 |     },
152 |     weekdays() {
153 |       return this.formatNepali ? NEPALI_WEEK : ENGLISH_WEEK;
154 |     },
155 |     days() {
156 |       YEAR_DATES.forEach((yearData) => {
157 |         if (yearData.year == this.date.year) {
158 |           yearData.value.forEach((data, index) => {
159 |             // compare monthValue selected to index of yearData value
160 |             if (index == this.date.month) {
161 |               this.endDay = data; // eslint-disable-line
162 |             }
163 |           });
164 |         }
165 |       });
166 |       return Array(this.endDay)
167 |         .fill()
168 |         .map((_, idx) => new NepaliDate(this.year, this.date.month, idx + 1));
169 |     },
170 |     startweek() {
171 |       let currentDateValue = new NepaliDate(this.yearValue, this.monthValue, 1);
172 | 
173 |       ENGLISH_WEEK.forEach((data, index) => {
174 |         if (currentDateValue.format("DDD") == "Sun") {
175 |           this.startMonthValue = 7; // eslint-disable-line
176 |         } else if (currentDateValue.format("DDD") == data) {
177 |           this.startMonthValue = index; // eslint-disable-line
178 |         }
179 |       });
180 |       return this.startMonthValue;
181 |     },
182 |     formatedYearOrMonth() {
183 |       if (this.monthSelect == false && this.yearSelect == false) {
184 |         return this.formatNepali
185 |           ? this.date.format("mmmm yyyy")
186 |           : this.date.format("MMMM YYYY");
187 |       }
188 | 
189 |       if (this.monthSelect == false) {
190 |         return this.formatNepali
191 |           ? this.date.format("mmmm")
192 |           : this.date.format("MMMM");
193 |       }
194 | 
195 |       if (this.yearSelect == false) {
196 |         return this.formatNepali
197 |           ? this.date.format("yyyy")
198 |           : this.date.format("YYYY");
199 |       }
200 |       return "";
201 |     },
202 |     formatedYear() {
203 |       return this.formatNepali
204 |         ? this.date.format("yyyy")
205 |         : this.date.format("YYYY");
206 |     },
207 |     formatedDate() {
208 |       return this.formatNepali
209 |         ? this.date.format("dddd, dd mmmm")
210 |         : this.date.format("DDDD, DD MMMM");
211 |     },
212 |     formatedTodayText() {
213 |       return this.formatNepali ? "आज" : "Today";
214 |     },
215 |   },
216 |   methods: {
217 |     convertToNepali(date) {
218 |       return new NepaliDate(date).format("yyyy-mm-d");
219 |     },
220 |     getNepaliDateWithYear(year) {
221 |       return new NepaliDate(year, 0, 1).format("yyyy-mm-d");
222 |     },
223 |     active(date) {
224 |       return this.date.getTime() === date.getTime();
225 |     },
226 |     checkToday(date) {
227 |       let today = new NepaliDate();
228 |       return (
229 |         date.day == today.day &&
230 |         date.year == today.year &&
231 |         date.month == today.month
232 |       );
233 |     },
234 |     next() {
235 |       let _month = this.date.month + 1;
236 |       let _year = this.date.year;
237 |       if (_month > 11) {
238 |         _year++;
239 |         _month = 0;
240 |       }
241 |       this.setMonthAndYear(_month, _year);
242 |       this.date = new NepaliDate(_year, _month, 1);
243 |     },
244 |     prev() {
245 |       let _month = this.date.month - 1;
246 |       let _year = this.date.year;
247 |       if (_month < 0) {
248 |         _year--;
249 |         _month = 11;
250 |       }
251 |       this.setMonthAndYear(_month, _year);
252 |       this.date = new NepaliDate(_year, _month, 1);
253 |     },
254 |     monthSelectChange() {
255 |       this.date.setMonth(this.monthValue);
256 |     },
257 |     yearSelectChange() {
258 |       this.date.setYear(this.yearValue);
259 |     },
260 |     select(date) {
261 |       this.date = date;
262 |       this.formatedValue = this.date.format(this.format);
263 |       this.$emit("change", this.formatedValue);
264 |       this.hide();
265 |     },
266 |     show() {
267 |       this.visible = true;
268 |       setTimeout(() => document.addEventListener("click", this.hide), 200);
269 |     },
270 |     hide() {
271 |       this.visible = false;
272 |       document.removeEventListener("click", this.hide);
273 |     },
274 |     today() {
275 |       this.formatedValue = new NepaliDate().format(this.format);
276 |       this.date = new NepaliDate();
277 |       this.setMonthAndYear(this.date.getMonth(), this.date.getYear());
278 |       this.hide();
279 |     },
280 |     setMonthAndYear(month, year) {
281 |       this.monthValue = month;
282 |       this.yearValue = year;
283 |     },
284 |   },
285 | };
286 | </script>
287 | 
288 | <style scoped>
289 | * {
290 |   margin: 0;
291 |   box-sizing: border-box;
292 |   font-family: "Open Sans", sans-serif;
293 | }
294 | .datepicker {
295 |   position: relative;
296 | }
297 | .datepicker button {
298 |   outline: none;
299 |   border: 0;
300 |   background: transparent;
301 |   cursor: pointer;
302 |   transition: all 0.2s ease-in-out;
303 | }
304 | .calendar {
305 |   z-index: 9;
306 |   position: absolute;
307 |   width: 260px;
308 |   top: 100%;
309 |   box-shadow: 0px 14px 45px rgba(0, 0, 0, 0.25),
310 |     0px 10px 18px rgba(0, 0, 0, 0.22);
311 |   background: #fff;
312 |   visibility: hidden;
313 |   opacity: 0;
314 |   /* transform: translateY(-50%) translateX(50%); */
315 |   /* transition: all 0.3s linear; */
316 | }
317 | .calendar.show {
318 |   visibility: visible;
319 |   opacity: 1;
320 |   /* transform: translateY(0px); */
321 | }
322 | .calendar__header {
323 |   padding: 15px 10px;
324 |   /* border-radius: 10px; */
325 |   background: #5495c5;
326 |   color: #fff;
327 | }
328 | .calendar__year {
329 |   opacity: 0.6;
330 |   font-size: 1rem;
331 |   line-height: 1.2rem;
332 | }
333 | .calendar__date {
334 |   font-size: 1.2rem;
335 |   line-height: 1.5rem;
336 | }
337 | .calendar__month {
338 |   padding: 5px 3px;
339 |   display: flex;
340 |   justify-content: space-between;
341 |   align-items: center;
342 | }
343 | .calendar__month select {
344 |   height: 28px;
345 |   width: 100px;
346 |   border-radius: 5px;
347 |   border-color: #7ca3f1;
348 |   text-align-last: center;
349 | }
350 | .calendar__month button {
351 |   width: 25px;
352 |   margin-right: 4px;
353 |   height: 28px;
354 |   margin-left: 4px;
355 |   border-radius: 5px;
356 |   color: white;
357 |   text-align: center;
358 |   background: #247ac4;
359 | }
360 | .calendar__month button:hover {
361 |   background: rebeccapurple;
362 | }
363 | .calendar__month__prev {
364 |   transform: rotate(180deg);
365 | }
366 | .calendar__weeks,
367 | .calendar__days {
368 |   display: grid;
369 |   grid-template-columns: repeat(7, 1fr);
370 | }
371 | .calendar__days {
372 |   gap: 4px;
373 | }
374 | .calendar__day,
375 | .calendar__weekday {
376 |   text-align: center;
377 |   font-size: 12px;
378 | }
379 | .calendar__weekday {
380 |   opacity: 0.8;
381 |   font-weight: 300;
382 | }
383 | .calendar__day {
384 |   width: 32px;
385 |   height: 32px;
386 |   line-height: 32px;
387 |   font-weight: 300;
388 |   color: #1c94b8;
389 |   font-weight: bold;
390 |   cursor: pointer;
391 |   border-radius: 5px;
392 |   background: #dfeffc;
393 |   /* transition: all 0.3s ease-in-out; */
394 | }
395 | .calendar__day.selected {
396 |   background: rebeccapurple;
397 |   color: #fff;
398 | }
399 | .calendar__day.today {
400 |   background: #f77777;
401 |   color: #fff;
402 | }
403 | .calendar__day:hover {
404 |   background: rebeccapurple;
405 |   color: #fff;
406 |   opacity: 0.8;
407 | }
408 | .calendar__footer {
409 |   text-align: right;
410 | }
411 | .calendar__footer button {
412 |   padding: 8px 10px;
413 |   text-transform: uppercase;
414 |   font-weight: bold;
415 |   color: rebeccapurple;
416 |   opacity: 0.9;
417 | }
418 | .calendar__footer button:hover {
419 |   opacity: 1;
420 | }
421 | </style>
422 | 


--------------------------------------------------------------------------------