element-ui中的el-date-picker日期选择器, 周选择器获取当前选中周，并显示当日期时间段

最新推荐文章于 2024-05-24 15:42:10 发布
最新推荐文章于 2024-05-24 15:42:10 发布
阅读量1.1w 收藏 26
点赞数 9
分类专栏： elment-ui的小组件 文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongpo997/article/details/111039748
版权

element-ui中的el-date-picker日期选择器, 周选择器获取当前选中周，并显示当日期时间段

今天又做了一个小功能,是一个日期选择器,并且是周, element-ui 官方给的 type=“week”,就可以变成周选择器,但是显示的只是第几周,并没有时间段,看到大家的帖子很多都是利用添加input 框,然后利用css造成视觉上的效果达成.
接下来给大家介绍一个小玩意,dayjs,利用它很好实现时间段.
废话不多说直接上代码图.
1.结构
在这里插入图片描述
format 就是格式化我们所选的时间的作用,v-model双向绑定

2.js代码
在这里插入图片描述
图例框中的就是要的数据和一丢丢小逻辑,安装dayjs的方法也在图里

3.看一下流程
在这里插入图片描述

顺便上一下less样式,防止你的输入框太短
在这里插入图片描述
直接上效果图,注意看一下左侧打印
在这里插入图片描述

接下来给大家安利下这个demo中dayjs的方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

想要详细了解的话,可以去dayjs的官网看看
这次写的有点仓促
如果有不对不当之处请指出
如果喜欢的话,可以三连一下

八神异步
关注
  • 9
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Vue3 - Element Plus 日期选择器 el-date-picker，设置 type=week 变成周选择器后，将选择周时修改为 “周一至周日“ 为一组范围（详细示例代码，新手小白秒会）
王佳斌
03-13 2915
vue3，element-plus，DatePicker日期选择器，el-date-picker，周，type=week，周选择器，日期选择器week怎么拿到具体的时间范围，如何取week周选择器的value值，format如何设置，时间选择器按周选择时展示具体日期范围，vue3 elementPlus日期选择器 选择一周7天的数据格式怎么拿到，el-date-picker设置type等于week后怎么设置format属性，format和value-format怎么设置，范围选择器周，一周，选择一周7天时间
Element-ui DatePicker显示周数的方法示例
12-10
1.场景描述 我们公司是做电商的，运营的工作指标都是按周来定的，所以他们对周特别敏感，希望我们能在日期选择器上显示周数。刚接到这个需求时，心中很不乐意，因为Element-ui的日期选择器根本不支持显示周数。我只能看看源码来看看能否有解决的办法 具体代码大家可以在github中看到https://github.com/ElemeFE/element/pull/16415/commits/2b810cf73d1127645054265469bbb353d036cb21 2.查看源码 我们很轻松就能找到DatePicker相关的代码，在packages > date-picker 整个目录都是da
element ui获取日期选择器DatePicker选中的时间
honeymoon_的博客
06-15 6853
问题描述 日期选择器示例 <el-date-picker v-model="valueTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> 输出： 选择日期后： 此时控制台打印日期： console.log(this.valueTime); 结果为： 解决 使用element UI中
elementUI DatePicker 日期选择面板显示周数的进一步说明
elewen110的专栏
03-30 4290
elementUI 没有提供周选择器显示周数的功能，但是我们的项目中又必不可少。经过一番对比发现，其他几个 UI 框架好像大多数都支持 周选择器显示周数， 也有人给 elementUI 提了 issue，但是人家扯了一大堆原因，反正就是这个功能有问题，不提供这个功能，你能怎么滴吧。我心想既然别的UI框架能提供，你为什么就不能提供呢？至于其他的问题，留给用户自己去选择不行吗？但是我们也不能在一棵树上吊死啊。 经过查询，根据该博主分项的文章：elementUI DatePicker 日期选择器 周数显示.
Elementui里使用el-date-picker来选取指定时间段（时间段不超过31天）
最新发布
想好了再写！
05-24 387
【代码】Elementui里使用el-date-picker来选取指定时间段（时间段不超过31天）
日期选择器el-date-picker选择周、月、年
weixin_58034343的博客
05-17 253
【代码】日期选择器el-date-picker选择周、月、年。
【自定义el-date-picker，type=“week“】
Min_Fox的博客
08-02 1884
el-date-picker：type="week"增加此属性，elementUI自然周选择器，默认选取周日到周六的自然周。修改默认开始时间为自然周的周一。
el-date-picker周选择器获取选择的日期范围
博客简介
12-25 1681
【代码】el-date-picker周选择器获取选择的日期范围。
elementui 时间选择控件 type=‘week‘ 时的参数配置以及传值问题
Humor_L的博客
06-30 1598
element ui 日期选择器 type='wee'
Element el-date-picker 日期选择器详解
热门推荐
程序员大阳
10-15 6万+
本文目录
element 时间选择器，设置周与周的区间
Kill_paradise的博客
11-11 5270
1. 因为elementui 自带的周选择器，只能选择一个时间点， 所以我input 来装这个时间区间 结构如下： <divclass="time-select"> <co-date-picker type="week" v-model="valueTime1" format="yyyy年第WW周MM月dd日" placeholder="选择周" ...
Vue + Element UI 实现了一个周选择器
lee576的专栏
12-31 3391
如上图，下面贴代码 <template> <div> <el-date-picker size="large" style ="width:120px" v-model="selectYear" format="yyyy 年" value-format="yyyy" type="year" :clearable = "false" placeholder="选择年"> ..
element-ui 限制日期选择的方法(datepicker)
08-27
Element-UI 日期选择器提供了多种类型的日期选择器，如日期选择器、日期时间选择器、日期范围选择器等。在这里，我们将使用日期选择器来演示限制日期选择的方法。 在上面的示例代码中，我们使用了两个日期选择器，...
详解element-ui动态限定的日期范围选择器代码片段
11-20
element-ui 的日期选择器的组件是 el-date-picker. 设定 pickerOptions2， data() { return { pickerOptions2: { disabledDate: theDate => { const oneDay = 3600 * 1000 * 24 const current = the
react-daterange-picker:使用@ material-ui的React日期范围选择器。 现场演示
05-06
使用material-ui组件的React日期范围选择器。 现场演示： : 用法 npm install @matharumanpreet00/react-daterange-picker --save # or with yarn yarn add @matharumanpreet00/react-daterange-picker 基本范例 ...
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
[vue] element 周数选择器(区间)
qq_44909404的博客
06-24 3510
[vue] element 周数选择器(区间)
Vue+ElementUI+C#技巧分享：周数选择器
吾家有猫名探花的博客
11-26 882
这篇博客旨在深入探讨如何利用Vue和ElementUI来构建一个实用的周数选择器。周数选择器在很多类型的应用程序中都非常重要，尤其是在需要日期管理的系统中，如日历应用、项目管理工具或报告系统。正确地理解和计算周数对于确保数据的准确性和用户界面的一致性至关重要。然而，由于不同地区和标准对周的定义存在差异，开发这样的功能可能会带来挑战。
el-date-picker 日期时间限制
02-06
el-date-picker 是 Element UI 中的一个日期选择器组件，它提供了丰富的日期和时间选择功能。你可以通过设置一些属性来限制日期和时间的选择范围。 1. 限制可选日期范围： - 使用 `disabledDate` 属性可以禁用某些日期，例如禁用过去的日期或者只允许选择未来的日期。 - 使用 `pickerOptions` 属性可以设置可选日期的范围，例如只能选择最近一周的日期。 2. 限制可选时间范围： - 使用 `pickerOptions` 属性中的 `selectableRange` 可以设置可选的时间范围，例如只能选择上午或下午的时间段。 - 使用 `disabledHours`、`disabledMinutes`、`disabledSeconds` 属性可以禁用某些小时、分钟或秒钟。 下面是一个示例代码，演示如何限制日期和时间的选择范围： ```html <template> <el-date-picker v-model="date" type="datetime" :picker-options="pickerOptions" :disabled-date="disabledDate" ></el-date-picker> </template> <script> export default { data() { return { date: null, pickerOptions: { selectableRange: '18:00:00 - 23:59:59', // 只能选择晚上的时间段 }, }; }, methods: { disabledDate(time) { const today = new Date(); return time.getTime() < today.getTime(); // 禁用过去的日期 }, }, }; </script> ``` 这样设置之后，el-date-picker 组件就会根据你的限制条件来限制日期和时间的选择范围。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值