ToB企服应用市场:ToB评测及商务社交产业平台

标题: element ui - 克制选择今天后的日期 和日期选择后追加一天 [打印本页]

---

作者: 惊落一身雪    时间: 2024-8-24 17:48
标题: element ui - 克制选择今天后的日期 和日期选择后追加一天
需求，要求选择yyyy-MM-dd格式的组件，但是传参需要yyyy-MM-dd 00:00:00，和克制选择今天后的日期（包括今天）
这个用的时日期组件，格式为yyyy-MM-dd

1. <el-date-picker v-model="startTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择开始日期" @change="getSales" :picker-options="disabledDateOptions" />

复制代码

声明变量
disabledDateOptions 的作用是，克制选择今天以后的日期

1. export default {
2.   data() {
3.     return {
4.       startTime: null,
5.       endTime: null,
6.       disabledDateOptions: {
7.         disabledDate(time) {
8.           const today = new Date(new Date().setHours(0, 0, 0, 0))
9.           return time.getTime() >= today.getTime()
10.         }
11.       }
12.     }
13.   },
14.   methods: {
15.     tabList(e) {
16.       this.tabActive = e
17.     },
18.     getSales() {
19.        if (!this.startTime) {
20.         this.startTime = null
21.         this.endTime = null
22.       } else {
23.         const date = new Date(this.startTime)
24.         // 确保 startTime 格式为 "yyyy-MM-dd 00:00:00"
25.         this.startTime = this.formatDate(date) + ' 00:00:00'
26.         // 创建新的 Date 对象并加一天作为 endTime
27.         const endDate = new Date(date)
28.         endDate.setDate(date.getDate() + 1) // 加一天
29.         this.endTime = this.formatDate(endDate) + ' 00:00:00'
30.       }
31.        console.log(this.startTime,this.endTime )
32.     },
33.     // 辅助函数：格式化日期为 "yyyy-MM-dd"
34.     formatDate(date) {
35.       const year = date.getFullYear()
36.       const month = (date.getMonth() + 1).toString().padStart(2, '0') // 补零
37.       const day = date.getDate().toString().padStart(2, '0') // 补零
38.       return `${year}-${month}-${day}`
39.     }
40.   }
41. }
42.                                                                                                                         

复制代码

这个如选择 1999-02-02 ， this.startTime = 1999-02-02 00:00:00,  this.endTime = 1999-02-03 00:00:00
     

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4