2020-04-22 elementui 时间选择控件 type='week' 时的参数配置以及传值问题

1.因需求所以增加了一个选择周期的element时间选择控件,但是发现选择日期的时候是从周日开始的,后查明因为各国星期开始的第一天是不同的,所以才会这样,在控件中增加 :picker-options="{'firstDayOfWeek': 1}" 属性来进行控制,可选范围 1-7
2.后发现加入default-value没有办法对取值进行我需要的改变,故对取值进行处理,完整代码如下

<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)
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容