AntDesign Vue 中时间段选择器a-range-picker

无初始值的时间选择器

<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>

AntDesign Vue 中时间段选择器a-range-picker相关推荐

vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
vue颜色选择器_如何制作？ Vue的颜色选择器！
vue颜色选择器 by ZAYDEK 由ZAYDEK 如何制作? Vue的颜色选择器! (How to make a ? color picker with Vue!) 注意:颜色看起来可能比实际颜色 ...
daterangepicker 清空_Date Range Picker 中文网
首先,在您的网页中包含jQuery,Moment.js和Date Range Picker的文件: 然后将日期范围选择器附加到您想要触发它的任何内容: Code: $('input[name=&quo ...
Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图前言 Echart版本的确定全局导入或按需导入在对应的页面调用echart 前后端数据交互注意事项前言在Vue2.x开发中,为了更好地展示某一个时间 ...
vue DatePicker日期选择器时差8小时
vue中使用element-ui中的日期选择器组件时,会造成时区差.在向数据库中做保存时发现传输的时间参数和前端控件所选时间端不匹配(相差8小时), 调试发现与后端接口没有问题,是控件本身的原因. 1 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
vue中如何使用mockjs摸拟接口的各种数据
mockjs的作用生成模拟数据模拟 Ajax 请求,返回模拟数据基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...
Vue中使用v-for实现一对多数据的2层和3层嵌套循环
场景业务场景中常有一对多的情况. 后端在给前端返回数据时是一个对象的list,为每个对象的有一个属性是多的那个的对象的list. 比如后台给前端返回的数据示例如下那么在Vue中怎样将这个一对多的 ...
vue中style的scoped属性的设计方式
vue中style的scoped属性这里是怎实现的呢? scoped三条渲染规则给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性在每句css选 ...

AntDesign Vue 中时间段选择器a-range-picker

无初始值的时间选择器

需要初始值的时间选择器

设置初始值 initialValue，如果初始值是异步获取或是参数携带过来的可使用设置功能来赋值初始值，如果是死的可用initialValue

AntDesign Vue 中时间段选择器a-range-picker相关推荐

最新文章

热门文章