自定义elementUi 日期格式

最新推荐文章于 2024-05-28 17:18:07 发布

罗百万.

最新推荐文章于 2024-05-28 17:18:07 发布

阅读量1.1k

点赞数 25

文章标签：前端 javascript vue.js elementui

本文链接：https://blog.csdn.net/qq_27664517/article/details/135680415

版权

本文介绍了如何在Vue应用中使用el-date-picker组件设置daterange类型的日期选择范围，并展示了如何自定义disabledDate和计算特定范围内的开始和结束日期，如周、月和指定日期范围。

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

日：{"startDate":"2024-04-07","endDate":"2024-04-07","typeCN":"2024-04-07~2024-04-07"}
周：{"startDate":"2024-04-01","endDate":"2024-04-07","typeCN":"2024年第14周"}
月：{"startDate":"2024-04-01","endDate":"2024-04-08","typeCN":"2024年04月"}

日：{"startDate":"2024-04-07","endDate":"2024-04-07","typeCN":"2024-04-07~2024-04-07"}

<el-date-picker v-model="dayDate" type="daterange" format="yyyy年 MM月 dd日" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>

dayDate: [new Date().getTime() - 8.64e7, new Date().getTime() - 8.64e7] //默认值昨天

pickerOptions: {
disabledDate: (time) => {
const t = 365 * 24 * 3600 * 1000
return time.getTime() > Date.now() - 8.64e7 || time.getTime() < Date.now() - 8.64e7 - t
},
},

月：{"startDate":"2024-04-01","endDate":"2024-04-08","typeCN":"2024年04月"}

<el-date-picker v-model="monthDate" type="month" format="yyyy 年 MM 月" :picker-options="monthOption"></el-date-picker>

data(){
return{
monthDate: new Date(),
monthOption: {
disabledDate: (time) => {
return time.getTime() > Date.now()
},
},
},
computed: {
// 月
monthHand() {
if (this.monthDate) {
const year = this.monthDate.getFullYear()
const monthIndex = this.monthDate.getMonth()
const firstDayOfMonth = new Date(year, monthIndex)
const tday = Date.now()
const lday = new Date(year, monthIndex + 1, 0).getTime()
const lastDayOfMonth = tday < lday ? tday : lday
return [moment(firstDayOfMonth).format('YYYY-MM-DD'),moment(lastDayOfMonth).format('YYYY-MM-DD'), moment(firstDayOfMonth).format('YYYY年MM月')]
}
return []
},
}

周：{"startDate":"2024-04-01","endDate":"2024-04-07","typeCN":"2024年第14周"}

<el-date-picker v-model="weekDate" type="week" format="yyyy 第 WW 周" :picker-options="weekOption"></el-date-picker>

data(){

return {

weekDate: new Date() - 7 * 24 * 3600 * 1000,

weekOption: {

disabledDate: (time) => {

return time.getTime() > Date.now()

},

firstDayOfWeek: 1,

},

},

computed:{

weekHand(){

if (this.weekDate) {

const now = new Date(this.weekDate)

const nowTime = now.getTime()

const day = now.getDay()

const oneDayTime = 24 * 60 * 60 * 1000

const sundayTime = nowTime + (7 - day) * oneDayTime

const todayaTime = new Date().getTime()

const startDate = moment(this.weekDate).startOf('week').add(1, 'days')

const endDate = todayaTime < sundayTime ? todayaTime : sundayTime

return [moment(startDate ).format('YYYY-MM-DD'), moment(endDate ).format('YYYY-MM-DD'), moment(startDate).format('YYYY年第W周')]

}

return []

},

}

}