ElementUI

日期选择器的切换实现

方式一：同一个日期组件，通过修改属性实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><title>日期选择器的切换</title><style>.all{width:500px;position: absolute;left:400px}</style>
</head><body><div id="app"><template><div class="all"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="报表类型"><el-radio-group v-model="radio" @change="changeRadio(radio)"><el-radio-button label="1">日</el-radio-button><el-radio-button label="2">月</el-radio-button><el-radio-button label="3">自定义时间</el-radio-button></el-radio-group></el-form-item><el-form-item><el-date-picker v-model="form.date" :type="dateType" :placeholder="placeholder":value-format="valueFormat"start-placeholder="开始日期"end-placeholder="结束日期":key="key"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="showData">查询</el-button></el-form-item></el-form></div></template></div><script>new Vue({el: '#app',data() {return {radio: '1', // 单选框，设置默认值为label=1的选项dateType:'date',placeholder:'选择日', // 无选择时的占位内容，设置默认为"选择日"valueFormat:'yyyy-MM-dd', // 设置读取时间数据时的格式form: {date:'',},key:'', // 给日期选择器一个标号，防止弹出框位置出错}},methods: {changeRadio(radio){this.form.date = '' // 先清空原来的值if(radio == "1"){this.dateType = "date"this.placeholder = "选择日"this.valueFormat="yyyy-MM-dd"this.key="1"}else if(radio == "2"){this.dateType = "month"this.placeholder = "选择月"this.valueFormat="yyyy-MM"this.key="2"}else if(radio == "3"){this.dateType = "daterange"this.placeholder = "选择时间段"this.valueFormat="yyyy-MM-dd"this.key="3"}},showData(){console.log(this.form);}},})</script>
</body></html>

如果使用ElementUI进行几个日期选择器之间的切换时，发现弹出框位置出错，如下：

解决方法就是在日期选择器组件中添加一个属性key，给要切换的各个日期选择器一个唯一值，结果如下：

方式二：通过v-if/v-show隐藏切换过去的日期组件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><title>日期选择器切换</title><style>.all {width: 500px;position: absolute;left: 400px}</style>
</head><body><div id="app"><template><div class="all"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="报表类型"><el-radio-group v-model="radio" @change="changeRadio(radio)"><el-radio-button label="1">日</el-radio-button><el-radio-button label="2">月</el-radio-button><el-radio-button label="3">自定义时间</el-radio-button></el-radio-group></el-form-item><el-form-item label="选择时间"><div v-show="radio === '1'"><el-date-picker v-model="day" type="date" placeholder="选择日" value-format="yyyy-MM-dd"></el-date-picker></div><div v-show="radio === '2'"><el-date-picker v-model="month" type="month" placeholder="选择月" value-format="yyyy-MM"></el-date-picker></div><div v-show="radio === '3'"><el-date-picker v-model="timeRange" type="daterange" value-format="yyyy-MM-dd"start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></div></el-form-item><el-form-item><el-button type="primary" @click="searchData">查询</el-button><el-button type="primary" @click="clear">清空</el-button></el-form-item></el-form></div></template></div><script>new Vue({el: '#app',data() {return {radio: '1', // 单选框，设置默认值为label=1的选项day: '', // 某一天month: '', // 某一个月timeRange: [], // 时间段form: {beginTime: '',endTime: ''},}},methods: {// 单选框改变时，清空原来组件上的值changeRadio(radio) {this.day = ''this.month = ''this.timeRange = []},// 查询功能searchData() {// 处理时间段，将数组分成两个字符串，赋值给form表单中的两个属性if (this.timeRange.length > 0) {this.form.beginTime = this.timeRange[0]this.form.endTime = this.timeRange[1]} // 处理某一个月，拿取该月的第一天到该月的最后一天else if (this.month !== '') {let date = new Date(this.month)let month = (date.getMonth() + 1).toString().padStart(2,'0')let year = date.getFullYear()let beginTime = year + '-' + month + '-' + '01'let day = new Date(year,month,0)let endTime = year + '-' + month + '-' + day.getDate()this.form.beginTime = beginTimethis.form.endTime = endTime} // 处理某一天else if (this.day !== '') {this.form.beginTime = this.daythis.form.endTime = this.day}// 输出查询结果console.log(this.form);},// 清空clear() {this.form.beginTime = ''this.form.endTime = ''this.day = ''this.month = ''this.timeRange = []}},})</script>
</body></html>

elemenUI 2.x：单选框控制日期选择器的切换相关推荐

基于bootstrap模态框的日期选择器
近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...
作业利用单选框控制图片的显示
需求说明界面有两个单选框分别显示男和女点第一个单选框,显示一个男士图点第二个单选框,显示一个女子图图片素材 https://img-blog.csdnimg.cn/2021042816240 ...
html原生时间选择框,HTML5日期选择器有任何样式选项吗？
WebKit提供以下八个伪元素,用于自定义日期输入的文本框: ::-webkit-datetime-edit ::-webkit-datetime-edit-fields-wrapper ::-web ...
解决select 下拉框选择器 input输入框、时间日期选择器el-date-picker 赋值后，出现无法修改选中更改问题
ElementUI时间选择器,传入时间赋值后之后无法改变 // ElementUI的表格组件<el-date-pickersize="mini"style="wid ...
html php单选框,html单选框选中状态 html 怎么设置单选框的样式
Photoshop中 hard round,airbrush pen opacity fl硬圆喷枪软圆希望喜欢, 用php怎么检查html中的单选框是否被选中 html中单选按钮控件标签用法解析及 ...
html表单日期选择器ppt,DatePicker 日期选择框
## DatePicker 日期选择器 ### 该文档不再维护,新版文档地址: [form-create 文档](http://fc.gd8.top) #### [在线预览](https://jsru ...
Android 自定义弹框日期选择器弹框，年月日，时分，
之前有个项目要用到日期选择器,于是百度了有关方法,自己将其封装成了自定义控件项目地址:点击打开链接效果图 Android 自带的日期选择器和时间选择器为DatePicker 和 ...
html中下拉列表监听事件,ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据...
本文将为您描述ExtJS 下拉框监听事件.日期选择器监听事件.实现动态给items添加删除数据,具体实现方法: 1.下拉框下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件 ...
element 日期选择器el-date-picker 月份/日期范围控制
element 日期选择器el-date-picker 月份范围控制 <template> <el-date-pickertype="month"v-model= ...

elemenUI 2.x：单选框控制日期选择器的切换

ElementUI

日期选择器的切换实现

方式一：同一个日期组件，通过修改属性实现

方式二：通过v-if/v-show隐藏切换过去的日期组件

elemenUI 2.x：单选框控制日期选择器的切换相关推荐

最新文章

热门文章