Element UI DatePicker 日期选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI DatePicker 日期选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

该组件选择周的时候，默认显示‘xxxx年第x周’，但在需求要显示为‘xxxx年x月第x周（mm.dd - mm.dd)’或者‘本周（mm.dd - mm.dd)’，最终效果为

首先需要修改v-model默认展示日期，控件中默认展示为周二，设置picker-options，修改为周一，

同时设置不可选本周日以后的时间：

<el-date-picker
  v-model="weekValue1"
  type="week"
  :format="thisweek + '（' + start2 + ' - ' + end2 + '）'"
  @change="showDate1"
  :picker-options="onPicker" // 设置picker-options
  placeholder="选择周"
  :clearable="false">
</el-date-picker>


onPicker: {
    firstDayOfWeek: 1, // 周起始日为星期一
    disabledDate (value) {
      const today = new Date(); // 获取今天日期
      const d = today.getDay(); // 计算今天是周几。如果是周天，d=0
      let w = 0;
      if (d === 0) {
        w = 7;
      } else {
        w = d;
      }
      // let startTime = today.setDate(today.getDate() - w);
      // return value.getTime() < startTime; //不可选本周一以前的时间
      const endTime = today.setDate(today.getDate() + (7 - w));
      return value.getTime() > endTime; // 不可选本周日以后的时间
    }
},

设置显示为‘xxxx年x月第x周（mm.dd - mm.dd)’和format有关，

 :format="thisweek + '（' + start2 + ' - ' + end2 + '）'"
@change="showDate1"

用@change绑定showDate1方法控制thisweek,start2,end2。

这里介绍一个轻量的处理时间和日期的 JavaScript 库：Day.js

中文文档：Day.js · 中文文档 - 2kB 大小的 JavaScript 时间日期库

vue下安装和使用：在main.js下：


import dayjs from 'dayjs';
Vue.prototype.dayjs = dayjs;

直接调用dayjs() 将返回一个包含当前日期和时间的 Day.js 对象。
等同于 dayjs(new Date()) 的调用。
dayjs(e) 等同 dayjs(new Date(e))

subtract(1, 'day') 方法：返回减去一定时间的复制的 Day.js 对象。减去1天，控件展示为周一的日期。

add(6, 'day')方法：返回增加一定时间的复制的 Day.js 对象。加上6天，控件展示为周日的日期。


showDate1 (e) {
  const startTime = this.dayjs(e).subtract(1, 'day').$d;
  const endTime = this.dayjs(startTime).add(6, 'day').$d;
  this.start2 = this.splitDate2(startTime);
  this.end2 = this.splitDate2(endTime);

  this.weekValue1 = new Date()
  const y = this.weekValue1.getFullYear()
  const m = this.weekValue1.getMonth() + 1
  const d = this.weekValue1.getDate()

  this.lastweekday = new Date(this.dateToYYYYMMDD(this.weekValue1 - 7 * 24 * 60 * 60 * 1000)) // 所选周上周的日期
  this.lastweek = this.lastweekday.getFullYear() + '年' + (this.lastweekday.getMonth() + 1) + '月第' + this.getMonthWeek(this.lastweekday.getFullYear(), (this.lastweekday.getMonth() + 1), this.lastweekday.getDate()) + '周'

  if (this.weekValue1.getFullYear() === y && this.weekValue1.getMonth() + 1 === m && this.getMonthWeek(y, m, this.weekValue1.getDate()) === this.getMonthWeek(y, m, d)) {
    this.thisweek = '本周'
  } else {
    this.thisweek = y + '年' + m + '月第' + this.getMonthWeek(y, m, d) + '周'
  }
},
// 处理时间格式
splitDate2 (date) {
  return this.dayjs(date).format('MM.DD');
},
// 计算某日是第几周
getMonthWeek (a, b, c) {
  const date = new Date(a, parseInt(b) - 1, c)
  const day = date.getDay() || 7
  const d = date.getDate()
  return Math.ceil((d + 6 - day) / 7)
},
// 时间戳返回 yyyy-MM-dd 格式字符串
dateToYYYYMMDD (date) {
  const time = new Date(date);
  const y = time.getFullYear();
  let m = (time.getMonth() + 1);
  m = m > 9 ? m : '0' + m;
  let d = time.getDate();
  d = d > 9 ? d : '0' + d;
  return y + '-' + m + '-' + d
},

参考：Vue使用Element的日期选择器DatePicker，以周为单位_el-date-picker的type为week-CSDN博客文章来源地址https://www.toymoban.com/news/detail-489713.html

到了这里，关于Element UI DatePicker 日期选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！