element-plus日期选择器实现先选择年再选择月

最新推荐文章于 2024-04-18 13:30:22 发布

永远不会太晚

最新推荐文章于 2024-04-18 13:30:22 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： html vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_42611074/article/details/120787100

博客讲述了如何修改Element-Plus的日期选择器组件，使其默认展示年份而非月份，以提升用户体验。通过监听`@focus`事件并模拟点击年份标签，实现了显示年份列表的功能，代码示例给出了具体的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-plus日期选择器默认显示当前年的月份
产品认为这样用户体验不好，应该先显示年，用户选择完年再选择月

话不多说，代码

<el-date-picker v-model="time" type="month" placeholder="请输入" @focus="showYear(0)">
</el-date-picker>

   showYear (index) {
            document.querySelectorAll('.el-date-picker__header-label')[index].click()
        }

其实就是获取el-date-picker中点击后显示年份列表的dom，直接代替用户触发点击事件，从而显示年份列表

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

永远不会太晚

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

element-plus的DateTimePicker 日期时间选择器

chenghao13834505361的博客

06-05

745

Element Plus 的 DateTimePicker 组件可同时选择日期和时间，通过设置type为datetime或实现单值或范围选择。支持通过format和分别控制输入框显示格式和绑定值格式，默认接收和输出Date对象。属性包括disabledformat等，事件有changeblur等，还可通过插槽自定义图标，适用于需要日期时间选择的场景。核心功能支持单日期时间选择（）和日期时间范围选择（范围选择时默认时间为00:00:00，可通过属性自定义起始和结束时间（如格式控制format。

element-plus form表单组件之el-date-picker日期选择器组件

lucky_ly的博客

06-23

2155

el-date-picker日期选择器组件可根据年，月，日期，时间范围来进行选择，可以自定义日期格式，和样式，还提供多种内置事件。

参与评论您还未登录，请先登录后发表或查看评论

vue日期控件实现可以选择年月或者选择年月日

08-12

1、可以选择年月或者选择日期，比如：选择年月，在显示框中就显示2022-06，如果选择日期，则显示2022-06-04 2、默认是当前日期，当点击控件时弹框显示定位到当前的年和月，日默认为空

el-date-picker element时间选择器先选择年再选择月年月日依次选择

小新的博客

01-14

4710

el-date-picker element时间选择器先选择年再选择月年月日依次选择

vue与elementUI中input输入框日期格式选择＜el-date-picker

00年女程序员分享自己的学习笔记

07-27

3693

vue与elementUI中input输入框日期格式选择

实现element-plus年份范围选择器

JackChan

04-18

446

实现element-plus年份范围选择器

vue3使用element-plus 实现选择年份区间选择

weixin_43935062的博客

12-22

1135

至

element-plus---Cascader三级联动地区选择---json数据

08-19

Element Plus是一个流行的Vue.js组件库，它提供了丰富的UI组件，包括Cascader（级联选择器），适用于这种需求。在这个场景中，"element-plus---Cascader三级联动地区选择---json数据" 主题指的是使用Element Plus的...

element-ui 限制日期选择的方法(datepicker)

08-27

Element-UI 日期选择器提供了多种类型的日期选择器，如日期选择器、日期时间选择器、日期范围选择器等。在这里，我们将使用日期选择器来演示限制日期选择的方法。在上面的示例代码中，我们使用了两个日期选择器，...

vue3 element-plus 日期选择器 el-date-picker 汉化

且听风吟的博客

12-12

3925

vue3 element-plus 日期选择器 el-date-picker 汉化

element-plus：el-date-picker日期只选择年月不要日

闪电⚡之王的博客简介

12-31

4470

使用format属性将时间显示格式修改为YYYY–MM 年月格式使用value-format将绑定值的格式修改为YYYY–MM年月格式

elementUI的日期选择组件只能选择当前年的日期，不能选择之前年和之后年的日期

yang_web的博客

05-07

3199

elementUI的日期选择组件只能选择当前年的日期，不能选择之前年和之后年的日期 <el-date-picker v-model="form.nowYear" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择当前年份" :picker-options="pickerOptions" /> pickerOptions: { disabledDate(

elementui 日期选择器只选择--当月--今天之前和今天的日期到当月--月初，不选则上月和下月日期

woshi759956817的博客

09-10

2473

布局 <el-date-picker width="300" v-model="month" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker> data 中写入 data() { return { month: "", pickerOptions: {} }; }, 方法引入 disabledDate () {

vue日历控件,自定义选择年月选择年月日选择年月日时选择年月日时分，自定义日期范围...

weixin_30824277的博客

03-23

2446

下载地址:https://github.com/zw1371/zm-datepicker 　　注:功能更加全面的日历控件请访问:https://www.cnblogs.com/mrzhu/p/9242332.html <zm-datepicker mindate="2018-1-26 12:12:12" maxdate="2018-3-26 12:12:12" type="...

Element el-date-picker 日期选择器详解

最新发布

05-16

### Element-Plus 日期选择器自定义月份内容在 `Element-Plus` 中，可以通过插槽 (Slot) 或者事件机制来自定义组件的行为和外观。对于日期选择器 (`el-date-picker`) 的月份部分，可以利用其内置的插槽功能来实现自定义显示效果。以下是通过 Vue 和 Element-Plus 实现的一个示例： #### 示例代码 ```vue <template> <div>  <el-date-picker v-model="dateValue" type="month" placeholder="请选择月份">  <template #month-panel="{ month, year }"> <span>{{ getCustomMonthContent(month, year) }}</span>  </template> </el-date-picker> </div> </template> <script> export default { data() { return { dateValue: null // 双向绑定的日期值 }; }, methods: { /** * 获取自定义月份内容的方法 */ getCustomMonthContent(month, year) { const customTexts = [ '特别月', '促销月', '节日月', '活动月', '常规月', '淡季月', '旺季月', '特殊月' ]; return `${year} 年 ${customTexts[month - 1]} (${month})`; // 返回定制化文字[^1] } } }; </script> ``` 在这个例子中，我们使用了 `el-date-picker` 提供的 `type="month"` 属性以及 `#month-panel` 插槽。该插槽允许开发者覆盖默认的月份展示逻辑并提供自己的 HTML 结构或动态数据处理方式。需要注意的是，在实际开发过程中可能还需要考虑样式调整等问题以确保最终呈现的效果满足设计需求。 #### 关于样式的补充说明如果希望进一步修改视觉风格，则可通过 CSS 定义特定类名或者作用域内的样式规则来进行美化操作。例如设置字体大小、颜色等属性以便更好地融入整体界面布局之中[^2]。