mirror of
https://github.com/tenrok/vue2-datepicker.git
synced 2026-06-23 19:20:37 +03:00
Merge branch 'master' of https://github.com/mengxiong10/vue2-datepicker
This commit is contained in:
@@ -2,3 +2,4 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
yarn-error.log
|
yarn-error.log
|
||||||
|
package-lock.json
|
||||||
|
|||||||
@@ -25,6 +25,13 @@ export default {
|
|||||||
return {
|
return {
|
||||||
time1: '',
|
time1: '',
|
||||||
time2: '',
|
time2: '',
|
||||||
|
shortcuts: [
|
||||||
|
{
|
||||||
|
text: 'Today',
|
||||||
|
start: new Date(),
|
||||||
|
end: new Date()
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -33,7 +40,7 @@ export default {
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<date-picker v-model="time1"></date-picker>
|
<date-picker v-model="time1"></date-picker>
|
||||||
<date-picker v-model="time2" range></date-picker>
|
<date-picker v-model="time2" range :shortcuts="shortcuts"></date-picker>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
@@ -50,5 +57,18 @@ export default {
|
|||||||
| showYearNav | Boolean | true | Show the year nav in the calendar |
|
| showYearNav | Boolean | true | Show the year nav in the calendar |
|
||||||
| notBefore | String | '' | Disable all dates before date in YYY-MM-DD format |
|
| notBefore | String | '' | Disable all dates before date in YYY-MM-DD format |
|
||||||
| notAfter | String | '' | Disable all dates after date in YYY-MM-DD format |
|
| notAfter | String | '' | Disable all dates after date in YYY-MM-DD format |
|
||||||
|
| shortcuts | Boolean/Array | true | the shortcuts for the range picker |
|
||||||
|
|
||||||
|
## shortcuts
|
||||||
|
* true - show the default shortcuts
|
||||||
|
* false - hide the shortcuts
|
||||||
|
* Object[] - custom shortcuts, [{text, start, end}]
|
||||||
|
|
||||||
|
| Prop | Type | Description |
|
||||||
|
|-----------------|---------------|------------------------|
|
||||||
|
| text | String | Text |
|
||||||
|
| start | Date | Start Date |
|
||||||
|
| end | Date | End Date |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
+31
-21
@@ -25,7 +25,7 @@
|
|||||||
:show="showPopup"></calendar-panel>
|
:show="showPopup"></calendar-panel>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="datepicker-top">
|
<div class="datepicker-top" v-if="ranges.length">
|
||||||
<span v-for="range in ranges" @click="selectRange(range)">{{range.text}}</span>
|
<span v-for="range in ranges" @click="selectRange(range)">{{range.text}}</span>
|
||||||
</div>
|
</div>
|
||||||
<calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)"
|
<calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)"
|
||||||
@@ -66,6 +66,10 @@ export default {
|
|||||||
default: 'zh'
|
default: 'zh'
|
||||||
},
|
},
|
||||||
value: null,
|
value: null,
|
||||||
|
shortcuts: {
|
||||||
|
type: [Boolean, Array],
|
||||||
|
default: true
|
||||||
|
},
|
||||||
disabledDays: {
|
disabledDays: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: function () { return [] }
|
default: function () { return [] }
|
||||||
@@ -192,26 +196,32 @@ export default {
|
|||||||
this.$emit('input', [range.start, range.end])
|
this.$emit('input', [range.start, range.end])
|
||||||
},
|
},
|
||||||
initRanges () {
|
initRanges () {
|
||||||
this.ranges = [{
|
if (Array.isArray(this.shortcuts)) {
|
||||||
text: '未来7天',
|
this.ranges = this.shortcuts
|
||||||
start: new Date(),
|
} else if (this.shortcuts) {
|
||||||
end: new Date(Date.now() + 3600 * 1000 * 24 * 7)
|
this.ranges = [{
|
||||||
}, {
|
text: '未来7天',
|
||||||
text: '未来30天',
|
start: new Date(),
|
||||||
start: new Date(),
|
end: new Date(Date.now() + 3600 * 1000 * 24 * 7)
|
||||||
end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
|
}, {
|
||||||
}, {
|
text: '未来30天',
|
||||||
text: '最近7天',
|
start: new Date(),
|
||||||
start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
|
end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
|
||||||
end: new Date()
|
}, {
|
||||||
}, {
|
text: '最近7天',
|
||||||
text: '最近30天',
|
start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
|
||||||
start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
|
end: new Date()
|
||||||
end: new Date()
|
}, {
|
||||||
}]
|
text: '最近30天',
|
||||||
this.ranges.forEach((v, i) => {
|
start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
|
||||||
v.text = this.translation.pickers[i]
|
end: new Date()
|
||||||
})
|
}]
|
||||||
|
this.ranges.forEach((v, i) => {
|
||||||
|
v.text = this.translation.pickers[i]
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.ranges = []
|
||||||
|
}
|
||||||
},
|
},
|
||||||
displayPopup () {
|
displayPopup () {
|
||||||
const dw = document.documentElement.clientWidth
|
const dw = document.documentElement.clientWidth
|
||||||
|
|||||||
+1
-1
@@ -2,7 +2,7 @@
|
|||||||
"name": "vue2-datepicker",
|
"name": "vue2-datepicker",
|
||||||
"description": "A Datepicker Component For Vue2",
|
"description": "A Datepicker Component For Vue2",
|
||||||
"main": "datepicker/index.vue",
|
"main": "datepicker/index.vue",
|
||||||
"version": "1.3.1",
|
"version": "1.4.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
|
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
|
||||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||||
|
|||||||
Reference in New Issue
Block a user