Element日期选择器带快捷选项切换日期

Element 日期选择器改造，需求是打开选择器里面可以按日期选，按月份选，按年份选，如下图

我们要怎么去实现这个需求尼？那我们就简单粗暴一点上代码

html代码

<el-date-pickerkey="date"ref="date"size="mini"v-model="time"@focus="focus"v-if="timeType=='day'"type="date"placeholder="选择日期":picker-options="pickerOptions"value-format="yyyy-MM-dd"></el-date-picker><el-date-pickerkey="month"ref="month"size="mini"v-model="time"v-if="timeType=='month'"type="month"@focus="focus"placeholder="选择月份":picker-options="pickerOptions"value-format="yyyy-MM"></el-date-picker><el-date-pickerkey="yearData"ref="yearData"size="mini"v-model="time"v-if="timeType=='yearData'"type="year"placeholder="选择年份":picker-options="pickerOptions"value-format="yyyy"></el-date-picker>

js代码

data () {let _this = this // 在外面定义this ,因为在return 里面获this的指向不对
return {time: '',pickerOptions: {shortcuts: [{text: '按日期',onClick (picker) {_this .time = ""_this .timeType = "day"_this .$refs.month && _this .$refs.month.handleClose()_this .$refs.yearData && _this .$refs.yearData.handleClose()_this .$nextTick(() => {_this .$refs.date.focus()_this .$nextTick(() => {let dom = document.getElementsByClassName('el-picker-panel__shortcut')dom[0] ? dom[0].style.color = "#409EFF" : ""// 高亮显示dom[1] ? dom[1].style.color = "#606266" : ""// 正常字体颜色dom[2] ? dom[2].style.color = "#606266" : ""// 正常字体颜色})})}},{text: '按月份',onClick (picker) {_this .time = ""_this .timeType = "month"_this .$refs.date && _this .$refs.date.handleClose()_this .$refs.yearData && _this .$refs.yearData.handleClose()_this .$nextTick(() => {_this .$refs.month.focus()_this .$nextTick(() => {let dom = document.getElementsByClassName('el-picker-panel__shortcut')dom[0] ? dom[0].style.color = "#606266" : ""dom[1] ? dom[1].style.color = "#409EFF" : ""dom[2] ? dom[2].style.color = "#606266" : ""})})}},{text: '按年',onClick (picker) {_this .time = ""_this .timeType = "yearData"_this .$refs.date && _this .$refs.date.handleClose()_this .$refs.month && _this .$refs.month.handleClose()_this .$nextTick(() => {_this .$refs.yearData.focus()_this .$nextTick(() => {let dom = document.getElementsByClassName('el-picker-panel__shortcut')dom[0] ? dom[0].style.color = "#606266" : ""dom[1] ? dom[1].style.color = "#606266" : ""dom[2] ? dom[2].style.color = "#409EFF" : ""})})}}]},}
}

这样就实现我们的需求拉，希望能对你有帮助！

Element日期选择器带快捷选项切换日期相关推荐

Element日期选择器带快捷选项切换日期类型
需求: 如图,日期选择器弹出框快捷选项切换日期类型,高亮显示. 思路: 两种类型的日期弹窗点击快捷选项切换显示,通过ref控制弹出关闭handleClose()和聚焦显示focus(). 实现代码: ...
element UI 制作带快捷选项的时间选择器
如上图所示,带有快捷键的日期选择器: (1)设置快捷选项 View Code <el-date-pickerv-model="createTime"type="da ...
Elemrnt UI DatePicker日期选择器（格式、限定日期），周选择器
Elemrnt UI DatePicker日期选择器(格式.限定日期),周选择器日期选择器(格式) <el-date-pickertype="date"// 绑定值的格式v ...
element周选择器---设置展示周和日期
element周选择器: 粘贴可用实现效果: - 代码: npm install dayjs --save main.js import dayjs from "dayjs"; ...
element时间选择器限制到时分秒_element-ui 日期时间选择器限制日期以及时间范围...
element-ui 日期时间选择器限制日期以及时间范围. 实现效果: 实现方式: 业务背景: 日期:只能选择今天以后的日期(包含今天), 时间:只能选择当前日期时间一小时以后的时间. 实现效果: 实 ...
安卓android日期选择器对话框 DatePickerDialog，实现日期选择，滚动式选择日期
文章目录一.设置XML文件二.获取文本框组件三.设置文本框的点击事件四.设置日期选择器对话框的事件监听器五.设置日期选择器对话框六.不同的主题七.完整的JAVA代码基本想法是:点击一个 ...
element 时间选择器禁用秒选项
需求是不要时间选择器的秒选项已解决只需要标签中的format不设置 ss 就可以了
element时间选择器限制到时分秒_ElementUI日期选择器时间选择范围限制
Element是一套基于vue2.x的一个ui框架.官方文档也很详细,这里记录一个element-ui日期插件的补充官方文档中使用picker-options属性来限制可选择的日期,下面举例补充: ...
element时日期选择器禁选某段日期
<el-date-picker v-model="value" :picker-options="pickerOptions"type="dat ...

Element日期选择器带快捷选项切换日期

Element 日期选择器改造，需求是打开选择器里面可以按日期选，按月份选，按年份选，如下图

html代码

js代码

Element日期选择器带快捷选项切换日期相关推荐

最新文章

热门文章