elementui 时间选择控件 type=‘week‘ 时的参数配置以及传值问题

最新推荐文章于 2024-05-28 10:00:43 发布

Humor_L

最新推荐文章于 2024-05-28 10:00:43 发布

阅读量1.6k

点赞数 1

文章标签：前端 javascript html

原文链接：https://www.jianshu.com/p/3b80bbe835bb

版权

博客讲述了如何在前端日期选择器中设置第一日为周日，并通过`picker-options`属性控制。当用户选择周期时，通过JavaScript计算并显示周期的开始和结束日期，同时提供了`setWeekNum`方法来处理日期转换和输出最终日期范围。

摘要由CSDN通过智能技术生成

日期的时候是从周日开始的,后查明因为各国星期开始的第一天是不同的,所以才会这样,在控件中增加 :picker-options="{'firstDayOfWeek': 1}" 属性来进行控制,可选范围 1-7

<el-form-item label="周期:" prop="misCycle">
  <el-date-picker
    v-model="temp1.misCycle"
    :picker-options="{'firstDayOfWeek': 1}"
    type="week"
    format="yyyy 第 WW 周"
    placeholder="请选择周期"
    style="width:100%"
    @change="setWeekNum"
  />
</el-form-item>
data() {
    return {
      temp1: {
        // 周期
        misCycle: '',
      },
      // 周期开始时间
      startDate: '',
      // 周期结束时间
      endDate: '',
      // 周期时间
      finalDate: ''
    }
  },  
methods: {
    p(s) {
      return s < 10 ? '0' + s : s
    },
    // 时间
    setWeekNum() {
      console.log(this.temp1.misCycle)
      const newTime = this.temp1.misCycle.getTime()
      const day = this.temp1.misCycle.getDay()
      const oneDayTime = 24 * 60 * 60 * 1000
      const fromTime = newTime - day * oneDayTime
      const endTime = newTime + (7 - day) * oneDayTime
      const fromDate = new Date(fromTime)
      this.startDate = fromDate.getFullYear() + '\xa0' + this.p((fromDate.getMonth() + 1)) + '\xa0' + this.p(fromDate.getDate() + 1)
      const toDate = new Date(endTime)
      this.endDate = toDate.getFullYear() + '\xa0' + this.p((toDate.getMonth() + 1)) + '\xa0' + this.p(toDate.getDate())
      console.log(this.startDate)
      console.log(this.endDate)
      this.finalDate = this.startDate + '-' + this.endDate
      console.log(this.finalDate)
    }
}