Gathering detailed insights and metrics for vue2-datepicker
Gathering detailed insights and metrics for vue2-datepicker
A datepicker / datetimepicker component for Vue2
Installations
npm install vue2-datepickerDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.13.1
NPM Version
8.12.1
Releases
49
Languages
5
JavaScript
Vue
SCSS
Shell
HTML
JavaScript (63.22%)
Vue (29%)
SCSS (6.07%)
Shell (0.89%)
HTML (0.82%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1,520 Stars
446 Commits
403 Forks
13 Watchers
22 Branches
21 Contributors
Updated on Jul 09, 2025
Maintainers
1
Package Meta Information
Latest Version
3.11.1
Package Id
vue2-datepicker@3.11.1
Unpacked Size
801.40 kB
Size
170.91 kB
File Count
132
NPM Version
8.12.1
Node Version
16.13.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
Dev Dependencies
48
@babel/core@babel/plugin-transform-object-assign@babel/plugin-transform-runtime@babel/preset-env@babel/runtime@commitlint/cli@commitlint/config-conventional@vue/babel-helper-vue-jsx-merge-props@vue/babel-preset-jsx@vue/component-compiler-utils@vue/test-utilsacornautoprefixerbabel-corebabel-eslintbabel-jestconventional-changelog-clicore-jscoverallscross-envdate-fnseslinteslint-config-airbnb-baseeslint-config-prettiereslint-plugin-importeslint-plugin-vueflush-promiseshighlight.jshuskyjestjest-serializer-vuelint-stagedmarkedparcel-bundlerpostcss-clirimrafrolluprollup-plugin-auto-externalrollup-plugin-babelrollup-plugin-commonjsrollup-plugin-node-resolverollup-plugin-terserrollup-plugin-vuesassvuevue-hot-reload-apivue-jestvue-template-compiler
vue2-datepicker
A Datepicker Component For Vue2
For Vue 3.0, you can use vue-datepicker-next from the same author
Demo
https://mengxiong10.github.io/vue2-datepicker/index.html
Install
1$ npm install vue2-datepicker --save
Usage
1<script> 2 import DatePicker from 'vue2-datepicker'; 3 import 'vue2-datepicker/index.css'; 4 5 export default { 6 components: { DatePicker }, 7 data() { 8 return { 9 time1: null, 10 time2: null, 11 time3: null, 12 }; 13 }, 14 }; 15</script> 16 17<template> 18 <div> 19 <date-picker v-model="time1" valueType="format"></date-picker> 20 <date-picker v-model="time2" type="datetime"></date-picker> 21 <date-picker v-model="time3" range></date-picker> 22 </div> 23</template>
Theme
If your project uses SCSS, you can change the default style variables.
To create a scss file. e.g. datepicker.scss:
1$namespace: 'xmx'; // change the 'mx' to 'xmx'. then <date-picker prefix-class="xmx" /> 2 3$default-color: #555; 4$primary-color: #1284e7; 5 6@import '~vue2-datepicker/scss/index.scss';
Internationalization
The default language of v3.x is English. If you need other locales, you can import a locale file. Once you import a locale, it becomes the active locale.
1import DatePicker from 'vue2-datepicker'; 2import 'vue2-datepicker/index.css'; 3 4import 'vue2-datepicker/locale/zh-cn';
You can also override some of the default locale by lang.
Full config
1<script> 2 export default { 3 data() { 4 return { 5 lang: { 6 formatLocale: { 7 firstDayOfWeek: 1, 8 }, 9 monthBeforeYear: false, 10 }, 11 }; 12 }, 13 }; 14</script> 15 16<template> 17 <date-picker :lang="lang"></date-picker> 18</template>
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| type | select the type of picker | date |datetime|year|month|time|week | 'date' |
| range | if true, pick the range date | boolean | false |
| format | to set the date format. similar to moment.js | token | 'YYYY-MM-DD' |
| formatter | use your own formatter, such as moment.js | object | - |
| value-type | data type of the binding value | value-type | 'date' |
| default-value | default date of the calendar | Date | new Date() |
| lang | override the default locale | object | |
| placeholder | input placeholder text | string | '' |
| editable | whether the input is editable | boolean | true |
| clearable | if false, don't show the clear icon | boolean | true |
| confirm | if true, need click the button to change value | boolean | false |
| confirm-text | the text of confirm button | string | 'OK' |
| multiple | if true, multi-select date | boolean | false |
| disabled | disable the component | boolean | false |
| disabled-date | specify the date that cannot be selected | (date: Date, currentValue: Date[]) => boolean | - |
| disabled-time | specify the time that cannot be selected | (date: Date) => boolean | - |
| append-to-body | append the popup to body | boolean | true |
| inline | without input | boolean | false |
| input-class | input classname | string | 'mx-input' |
| input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | object | — |
| open | open state of picker | boolean | - |
| default-panel | default panel of the picker | year|month | - |
| popup-style | popup style | object | — |
| popup-class | popup classes | — | |
| shortcuts | set shortcuts to select | Array<{text, onClick}> | - |
| title-format | format of the tooltip in calendar cell | token | 'YYYY-MM-DD' |
| partial-update | whether update date when select year or month | boolean | false |
| range-separator | text of range separator | string | ' ~ ' |
| show-week-number | determine whether show week number | boolean | false |
| hour-step | interval between hours in time picker | 1 - 60 | 1 |
| minute-step | interval between minutes in time picker | 1 - 60 | 1 |
| second-step | interval between seconds in time picker | 1 - 60 | 1 |
| hour-options | custom hour column | Array<number> | - |
| minute-options | custom minute column | Array<number> | - |
| second-options | custom second column | Array<number> | - |
| show-hour | whether show hour column | boolean | base on format |
| show-minute | whether show minute column | boolean | base on format |
| show-second | whether show second column | boolean | base on format |
| use12h | whether show ampm column | boolean | base on format |
| show-time-header | whether show header of time picker | boolean | false |
| time-title-format | format of the time header | token | 'YYYY-MM-DD' |
| time-picker-options | set fixed time list to select | time-picker-options | null |
| prefix-class | set prefix class | string | 'mx' |
| scroll-duration | set the duration of scroll when hour is selected | number | 100 |
Token
| Uint | Token | output |
|---|---|---|
| Year | YY | 70 71 ... 10 11 |
| YYYY | 1970 1971 ... 2010 2011 | |
| Y | -1000 ...20 ... 1970 ... 9999 +10000 | |
| Month | M | 1 2 ... 11 12 |
| MM | 01 02 ... 11 12 | |
| MMM | Jan Feb ... Nov Dec | |
| MMMM | January February ... November December | |
| Day of Month | D | 1 2 ... 30 31 |
| DD | 01 02 ... 30 31 | |
| Day of Week | d | 0 1 ... 5 6 |
| dd | Su Mo ... Fr Sa | |
| ddd | Sun Mon ... Fri Sat | |
| dddd | Sunday Monday ... Friday Saturday | |
| AM/PM | A | AM PM |
| a | am pm | |
| Hour | H | 0 1 ... 22 23 |
| HH | 00 01 ... 22 23 | |
| h | 1 2 ... 12 | |
| hh | 01 02 ... 12 | |
| Minute | m | 0 1 ... 58 59 |
| mm | 00 01 ... 58 59 | |
| Second | s | 0 1 ... 58 59 |
| ss | 00 01 ... 58 59 | |
| Fractional Second | S | 0 1 ... 8 9 |
| SS | 00 01 ... 98 99 | |
| SSS | 000 001 ... 998 999 | |
| Time Zone | Z | -07:00 -06:00 ... +06:00 +07:00 |
| ZZ | -0700 -0600 ... +0600 +0700 | |
| Week of Year | w | 1 2 ... 52 53 |
| ww | 01 02 ... 52 53 | |
| Unix Timestamp | X | 1360013296 |
| Unix Millisecond Timestamp | x | 1360013296123 |
formatter
The formatter accepts an object to customize formatting.
1<date-picker :formatter="momentFormat" />
1data() { 2 return { 3 // Use moment.js instead of the default 4 momentFormat: { 5 //[optional] Date to String 6 stringify: (date) => { 7 return date ? moment(date).format('LL') : '' 8 }, 9 //[optional] String to Date 10 parse: (value) => { 11 return value ? moment(value, 'LL').toDate() : null 12 }, 13 //[optional] getWeekNumber 14 getWeek: (date) => { 15 return // a number 16 } 17 } 18 } 19} 20
value-type
set the format of binding value
| Value | Description |
|---|---|
| 'date' | return a Date object |
| 'timestamp' | return a timestamp number |
| 'format' | returns a string formatted using pattern of format |
| token(MM/DD/YYYY) | returns a string formatted using this pattern |
shortcuts
The shortcuts for the range picker
1[ 2 { text: 'today', onClick: () => new Date() }, 3 { 4 text: 'Yesterday', 5 onClick: () => { 6 const date = new Date(); 7 date.setTime(date.getTime() - 3600 * 1000 * 24); 8 return date; 9 }, 10 }, 11];
| Attribute | Description |
|---|---|
| text | title of the shortcut |
| onClick | callback function , need to return a Date |
time-picker-options
Set fixed time list to select;
1{start: '00:00', step:'00:30' , end: '23:30', format: 'HH:mm' }
| Attribute | Description |
|---|---|
| start | start time |
| step | step time |
| end | end time |
| format | the default is same as prop format |
Events
| Name | Description | Callback Arguments |
|---|---|---|
| input | When the value change(v-model event) | date |
| change | When the value change(same as input) | date, type('date'|'hour'|'minute'|'second'|'ampm |
| open | When panel opening | event |
| close | When panel closing | |
| confirm | When click 'confirm' button | date |
| clear | When click 'clear' button | |
| input-error | When user type a invalid Date | the input text |
| focus | When input focus | |
| blur | When input blur | |
| pick | when select date #429 | date |
| calendar-change | when change the calendar | date, oldDate, type('year'|'month'|'last-year'|'next-year'|'last-month'|'next-month'|'last-decade'|'next-decade') |
| panel-change | when the calendar panel changes | type('year'|'month'|'date'), oldType |
Slots
| Name | Description |
|---|---|
| icon-calendar | custom the calender icon |
| icon-clear | custom the clear icon |
| input | replace input |
| header | popup header |
| footer | popup footer |
| sidebar | popup sidebar |
ChangeLog
One-time Donations
If you find this project useful, you can buy me a coffee
License
Copyright (c) 2017-present xiemengxiong
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 4/29 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 5 are checked with a SAST tool
Reason
93 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-p493-635q-r6gr
- Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-3fjq-93xj-3f3f
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.9
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More