Ideas:
- Use el-data-picker in element-ui to get the calendar style
- Binding the date in each el-data-picker through v-model
- Use the change method to trigger the re-request interface when the selected date changes
note:
- When requesting the interface to pass the calendar parameter value, use the moment to assist in formatting the date and use the ternary operator to process it. When the date is not available, the passed parameter is an empty string
<div class="block">
<el-date-picker
class="selectDate"
v-model="value1"
type="date"
placeholder="选择日期"
@change="getCertificationInfoList"
></el-date-picker>
</div>
<p class="linkBridge">一</p>
<div class="block_selDate">
<el-date-picker
class="selectDate"
v-model="value2"
type="date"
placeholder="选择日期"
@change="getCertificationInfoList"
></el-date-picker>
</div>
Variables defined by data, including the copied code in ele
data () {
return {
// 日历
pickerOptions: {
disabledDate (time) {
return time.getTime() > Date.now()
},
shortcuts: [
{
text: '今天',
onClick (picker) {
picker.$emit('pick', new 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)
}
}
]
},
value1: '',
value2: '',
}
},
Call interface
getCertificationInfoList () {
clearTimeout(this.t)
this.t = setTimeout(() => {
this.getList({
applyStatus: this.value,
enterpriseNumberOrName: this.searchKey,
createTimeFrom: this.value1
? monment(this.value1).format('YYYY-MM-DD')
: '',
createTimeTo: this.value2
? monment(this.value2).format('YYYY-MM-DD')
: '',
page: this.page,
size: this.pageSize
})
}, 500)
}