tiny-vue/examples/docs/resources/pc/demo/date-picker/date-range-shortcuts.vue

51 lines
1.3 KiB
Vue

<template>
<tiny-date-picker v-model="value" type="daterange" :picker-options="pickerOptionsDateRange"></tiny-date-picker>
</template>
<script lang="jsx">
import { DatePicker } from '@opentiny/vue'
export default {
components: {
TinyDatePicker: DatePicker
},
data() {
return {
value: [],
pickerOptionsDateRange: {
firstDayOfWeek: 7,
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}
]
}
}
}
}
</script>