2
0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-09 04:32:27 +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/
npm-debug.log
yarn-error.log
package-lock.json
+21 -1
View File
@@ -25,6 +25,13 @@ export default {
return {
time1: '',
time2: '',
shortcuts: [
{
text: 'Today',
start: new Date(),
end: new Date()
}
]
}
}
}
@@ -33,7 +40,7 @@ export default {
<template>
<div>
<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>
</template>
```
@@ -50,5 +57,18 @@ export default {
| showYearNav | Boolean | true | Show the year nav in the calendar |
| notBefore | String | '' | Disable all dates before 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>
</template>
<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>
</div>
<calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)"
@@ -66,6 +66,10 @@ export default {
default: 'zh'
},
value: null,
shortcuts: {
type: [Boolean, Array],
default: true
},
disabledDays: {
type: Array,
default: function () { return [] }
@@ -192,26 +196,32 @@ export default {
this.$emit('input', [range.start, range.end])
},
initRanges () {
this.ranges = [{
text: '未来7天',
start: new Date(),
end: new Date(Date.now() + 3600 * 1000 * 24 * 7)
}, {
text: '未来30天',
start: new Date(),
end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
}, {
text: '最近7天',
start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
end: new Date()
}, {
text: '最近30天',
start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
end: new Date()
}]
this.ranges.forEach((v, i) => {
v.text = this.translation.pickers[i]
})
if (Array.isArray(this.shortcuts)) {
this.ranges = this.shortcuts
} else if (this.shortcuts) {
this.ranges = [{
text: '未来7天',
start: new Date(),
end: new Date(Date.now() + 3600 * 1000 * 24 * 7)
}, {
text: '未来30天',
start: new Date(),
end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
}, {
text: '最近7天',
start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
end: new Date()
}, {
text: '最近30天',
start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
end: new Date()
}]
this.ranges.forEach((v, i) => {
v.text = this.translation.pickers[i]
})
} else {
this.ranges = []
}
},
displayPopup () {
const dw = document.documentElement.clientWidth
+1 -1
View File
@@ -2,7 +2,7 @@
"name": "vue2-datepicker",
"description": "A Datepicker Component For Vue2",
"main": "datepicker/index.vue",
"version": "1.3.1",
"version": "1.4.0",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"