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

51 lines
1.1 KiB
Vue

<template>
<div style="width: 270px">
<tiny-date-picker v-model="value" :picker-options="pickerOptions"></tiny-date-picker>
</div>
</template>
<script lang="jsx">
import { DatePicker } from '@opentiny/vue'
export default {
components: {
TinyDatePicker: DatePicker
},
data() {
return {
value: '',
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now()
},
shortcuts: [
{
text: '今天',
onClick(picker) {
const date = new Date()
picker.$emit('pick', date)
}
},
{
text: '昨天',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', date)
}
},
{
text: '一周前',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', date)
}
}
]
}
}
}
}
</script>