【自定义el-date-picker,type=“week“】

一、el-date-picker是什么?

el-date-picker:type="week"增加此属性,elementUI自然周选择器,默认选取周日到周六的自然周。

二、使用步骤

1.修改自然周第一天的默认值

但是中国是从周一开始计算自然周的第一天。所以要修改开始时间。增加:picker-options="{'firstDayOfWeek': 1}"即可,取值为1-7。

2.修改展示的时间

修改属性:format="json1_1_week_time + ' 至 ' + $moment(json1_1_week_time).endOf('week').format('YYYY-MM-DD')"

修改成一个时间区间

3.完整代码如下

javascript 复制代码
<el-date-picker
	style="width: 320px;"
	v-model="json1_1_week_time"
	type="week"
	:format="json1_1_week_time + ' 至 ' + $moment(json1_1_week_time).endOf('week').format('YYYY-MM-DD')"
	value-format="yyyy-MM-dd"
	:clearable="false"
	:editable="false"
	:picker-options="{'firstDayOfWeek': 1}"
></el-date-picker>
export default {
  data() {
    return {
      json1_1_week_time: "",
    };
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 本周的第一天
      this.json1_1_week_time = this.$moment().startOf('week').format('YYYY-MM-DD');
    },
  },
}

相关推荐
D_C_tyu6 天前
Vue3 + Element Plus | el-table 多级表头表格导出 Excel(含合并单元格、单元格居中)第二版
vue.js·elementui·excel
跟着珅聪学java6 天前
Element UI 的 el-input组件触发 blur事件
javascript·vue.js·elementui
Komorebi゛6 天前
【Vue + Element Plus】el-tree树结构样式改造,添加转折线
前端·javascript·vue.js·elementui
花生柿子6 天前
在elementui可横向滚动的table中,操作列有时候会透视下面的行
前端·javascript·elementui
敲代码的小吉米6 天前
Element Plus 表格中的复制功能使用指南
前端·javascript·elementui
小白探索世界欧耶!~13 天前
Vue2项目引入sortablejs实现表格行拖曳排序
前端·javascript·vue.js·经验分享·elementui·html·echarts
css趣多多14 天前
vue2项目改造为vue3遇到的问题以及解决办法
前端·vue.js·elementui
EstherNi15 天前
仿照elementui写图片放大的案例,但多加了下载按钮,vue3
javascript·vue.js·elementui
糕冷小美n18 天前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
沐墨染18 天前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code