2
0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-23 18:10:35 +03:00
This commit is contained in:
mengxiong10
2017-08-22 14:39:40 +08:00
4 changed files with 54 additions and 23 deletions
+1
View File
@@ -2,3 +2,4 @@
node_modules/ node_modules/
npm-debug.log npm-debug.log
yarn-error.log yarn-error.log
package-lock.json
+21 -1
View File
@@ -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
View File
@@ -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
View File
@@ -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"