Gathering detailed insights and metrics for vue2-datepicker-mask
Gathering detailed insights and metrics for vue2-datepicker-mask
Gathering detailed insights and metrics for vue2-datepicker-mask
Gathering detailed insights and metrics for vue2-datepicker-mask
npm install vue2-datepicker-mask
46.5
Supply Chain
97.6
Quality
75
Maintenance
50
Vulnerability
99.6
License
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
207 Commits
6 Forks
1 Watching
3 Branches
14 Contributors
Updated on 15 Oct 2018
Minified
Minified + Gzipped
JavaScript (56.37%)
Vue (35.31%)
CSS (7.57%)
Shell (0.75%)
Cumulative downloads
Total Downloads
Last day
14.3%
8
Compared to previous day
Last week
33.3%
48
Compared to previous week
Last month
4.3%
195
Compared to previous month
Last year
13.7%
2,027
Compared to previous year
2
26
A Datepicker Component For Vue2
Forked from vue2-datepicker Masking is done from the format given.
1$ npm install vue2-datepicker-mask --save
1<script> 2import DatePicker from 'vue2-datepicker' 3 4export default { 5 components: { DatePicker }, 6 data() { 7 return { 8 time1: '', 9 time2: '', 10 time3: '', 11 shortcuts: [ 12 { 13 text: 'Today', 14 onClick: () => { 15 this.time3 = [ new Date(), new Date() ] 16 } 17 } 18 ], 19 timePickerOptions:{ 20 start: '00:00', 21 step: '00:30', 22 end: '23:30' 23 } 24 } 25 } 26} 27 28</script> 29 30<template> 31 <div> 32 <date-picker v-model="time1" :first-day-of-week="1"></date-picker> 33 <date-picker v-model="time2" type="datetime" :time-picker-options="timePickerOptions"></date-picker> 34 <date-picker v-model="time3" range :shortcuts="shortcuts"></date-picker> 35 </div> 36</template>
Prop | Type | Default | Description |
---|---|---|---|
type | String | 'date' | select date type (date/datetime/year/month/time) |
range | Boolean | false | if true, the type is daterange or datetimerange |
format | String | YYYY-MM-DD | The parsing tokens are similar to the moment.js |
lang | String/Object | zh | Translation (en/zh/es/pt-br/fr/ru/de/it/cs)(custom) |
clearable | Boolean | true | if false, don't show the clear icon |
confirm | Boolean | false | if true, need click the button to change the value |
editable | Boolean | true | if false, user cann't type it |
disabled | Boolean | false | Disable the component |
placeholder | String | input placeholder text | |
width | String/Number | 210 | input size |
append-to-body | Boolean | false | append the popup to body |
popupStyle | Object | popup style(override the top, left style) | |
not-before | String/Date | '' | Disable all dates before new Date(not-before) |
not-after | String/Date | '' | Disable all dates after new Date(not-after) |
disabled-days | Array/function | [] | Disable Days |
shortcuts | Boolean/Array | true | the shortcuts for the range picker |
time-picker-options | Object | {} | set timePickerOptions(start, step, end) |
minute-step | Number | 0 | if > 0 don't show the second picker(0 - 60) |
first-day-of-week | Number | 7 | set the first day of week (1-7) |
input-class | String | 'mx-input' | the input class name |
input-name | String | 'date' | the input name attr |
confirm-text | String | 'OK' | the default text to display on confirm button |
range-separator | String | '~' | the range separator text |
date-format | String | '' | format the time header and tooltip |
1<script> 2export default { 3 data() { 4 return { 5 value: '', 6 lang: { 7 days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 8 months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 9 pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'], 10 placeholder: { 11 date: 'Select Date', 12 dateRange: 'Select Date Range' 13 } 14 } 15 } 16 } 17} 18</script> 19 20<template> 21 <date-picker v-model="value" :lang="lang"></date-picker> 22</template> 23
Prop | Type | Description |
---|---|---|
text | String | Text |
start | Date | Start Date |
end | Date | End Date |
onClick | Function | click handler |
Prop | Type | Description |
---|---|---|
start | String | startTime (eg '00:00') |
step | String | stepTime (eg '00:30') |
end | String | endTime (eg '23:30') |
Name | Description | Callback Arguments |
---|---|---|
change | When the value change | the currentValue |
input | When the value change | the currentValue |
confirm | When click 'OK' button | the currentValue |
clear | When click 'clear' button | |
input-error | When user type a invalid Date | the input text |
panel-change | When change the panel | panel, oldPanel |
['NONE', 'DATE', 'YEAR', 'MONTH', 'TIME']
Name | Description |
---|---|
calendar-icon | custom the calender icon |
header | popup header |
footer | popup footer |
Copyright (c) 2017-present xiemengxiong
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
147 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-25
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