无初始值的时间选择器
<template>
<div>
<a-card>
<a-form class="ant-advanced-search-form" :form="form">
<a-row :gutter="24">
<a-col :span="6">
<a-form-item label="订单类型">
<a-select v-model="orderType" style="width:100%" allowClear>
<a-select-option :value="item.orderTypeId" v-for="(item, i) in orderTypeArr" :key="i">
{{ item.typeName }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="起始时间">
<a-range-picker style="width: 100%" v-decorator="['range']" />
</a-form-item>
</a-col>
<a-col :span="6" class="pt-4">
<a-button type="primary" @click="search">
搜索
</a-button>
<a-button :style="{ marginLeft: '8px' }" @click="reset">
重置
</a-button>
</a-col>
</a-row>
</a-form>
</a-card>
</div>
</template>
<script>
import { getOrderTypeList } from '@/api/basicdatas/OrderType'
export default {
data() {
return {
form: this.$form.createForm(this, { name: 'acceptance' }),
orderTypeArr: [],
orderType: ''
}
},
mounted() {
getOrderTypeList().then(res => {
this.orderTypeArr = res.rows
})
},
methods: {
search() {
this.form.validateFields((err, fieldsValue) => {
let query = {}
console.log(111, err, fieldsValue)
if (fieldsValue.range && fieldsValue.range.length > 0) {
query = {
startTime: fieldsValue['range'][0].format('YYYY-MM-DD'),
endTime: fieldsValue['range'][1].format('YYYY-MM-DD')
}
} else {
query = {
startTime: '',
endTime: ''
}
}
console.log('搜索条件', Object.assign({ orderType: this.orderType || '' }, query))
})
},
reset() {
this.orderType = ''
this.form.resetFields()
}
}
}
</script>
<style lang="less" scoped>
/deep/.ant-advanced-search-form .ant-form-item {
display: flex;
}
/deep/.ant-advanced-search-form .ant-form-item-control-wrapper {
flex: 1;
}
</style>
需要初始值的时间选择器
设置初始值 initialValue,如果初始值是异步获取或是参数携带过来的可使用设置功能来赋值初始值,如果是死的可用initialValue
<template>
<div>
<a-form :form="form">
<a-form-item label="RangePicker">
<a-range-picker v-decorator="['rangetime',{initialValue:defaultTime}]" @change="onChangeRangeDate" format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']"/>
</a-form-item>
<a-button type="primary" @click="submit">
提交
</a-button>
<a-button type="primary" @click="reset">
重置
</a-button>
<a-button type="primary" @click="modify">
修改
</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
import moment from 'moment'
export default {
data () {
return {
defaultTime: [moment('2021-05-13', 'YYYY-MM-DD'), moment('2021-05-18', 'YYYY-MM-DD')],
start: '2021-05-13',
end: '2021-05-18',
form: this.$form.createForm(this, { name: 'time_related_controls' })
}
},
mounted () {
},
methods: {
moment,
onChangeRangeDate (value, dateString) {
console.log(dateString)
this.start = dateString[0]
this.end = dateString[1]
},
reset () {
this.form.setFieldsValue({
'rangetime': []
})
this.start = ''
this.end = ''
},
modify () {
this.form.setFieldsValue({
'rangetime': [moment('2021-05-22'), moment('2021-05-28')]
})
this.start = '2021-05-22'
this.end = '2021-05-28'
},
submit () {
this.form.validateFields((err, values) => {
console.log('Received values of form: ', err, values)
console.log(this.start, this.end)
})
}
}
}
</script>