112 lines
2.4 KiB
Vue
112 lines
2.4 KiB
Vue
<template>
|
|
<a-row class="date-picker-wrapper">
|
|
<a-button class="left" icon="left" type="primary" @click="handlePrevious">前一天</a-button>
|
|
<span
|
|
class="date"
|
|
v-if="!status.showDatePicker"
|
|
@click="status.showDatePicker = true">
|
|
{{dateString}}
|
|
</span>
|
|
<a-date-picker
|
|
v-if="status.showDatePicker"
|
|
class="date-picker"
|
|
format="YYYY 年 MM 月 DD 日"
|
|
@change="handleDateChange"
|
|
@openChange="handleDatePickerClose"
|
|
:disabledDate="disabledDate"
|
|
:allowClear="false"
|
|
:value="date">
|
|
</a-date-picker>
|
|
<a-button
|
|
class="right"
|
|
type="primary"
|
|
:disabled="date.format('YYYY-MM-DD') === maxDate.format('YYYY-MM-DD')"
|
|
@click="handleNext">
|
|
后一天
|
|
<a-icon type="right"></a-icon>
|
|
</a-button>
|
|
</a-row>
|
|
</template>
|
|
|
|
<script>
|
|
import settingAPI from '../../../api/setting'
|
|
import moment from 'moment'
|
|
|
|
export default {
|
|
name: 'DatePickerBar',
|
|
props: {
|
|
defaultDate: Object
|
|
},
|
|
data () {
|
|
return {
|
|
status: {
|
|
showDatePicker: false
|
|
},
|
|
date: this.defaultDate,
|
|
dateString: '',
|
|
setting: {}
|
|
}
|
|
},
|
|
mounted () {
|
|
settingAPI.getSettingDetail()
|
|
.then(data => {
|
|
this.setting = data
|
|
})
|
|
this.getDateString()
|
|
},
|
|
methods: {
|
|
getDateString () {
|
|
this.dateString = this.date.format('YYYY 年 MM 月 DD 日')
|
|
},
|
|
handleDateChange (date) {
|
|
this.date = date
|
|
this.getDateString()
|
|
this.$emit('change', this.date)
|
|
},
|
|
handleDatePickerClose (status) {
|
|
if (!status) this.status.showDatePicker = false
|
|
},
|
|
handlePrevious () {
|
|
this.date.subtract(1, 'days')
|
|
this.getDateString()
|
|
this.$emit('change', this.date)
|
|
},
|
|
handleNext () {
|
|
this.date.add(1, 'days')
|
|
this.getDateString()
|
|
this.$emit('change', this.date)
|
|
},
|
|
disabledDate (currentDate) {
|
|
return currentDate > this.maxDate
|
|
}
|
|
},
|
|
computed: {
|
|
maxDate () {
|
|
return new moment().add(this.setting.pre_booking_interval_day, 'days')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.date-picker-wrapper {
|
|
text-align: center;
|
|
|
|
.left {
|
|
float: left;
|
|
}
|
|
|
|
.date {
|
|
font-size: 18px;
|
|
vertical-align: -8px;
|
|
}
|
|
|
|
.date-picker {
|
|
width: 200px;
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
}
|
|
}
|
|
</style> |