【自定义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');
    },
  },
}

相关推荐
赵得C7 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
小菜全12 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
浩星18 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
xrkhy18 小时前
ElmentUI之DateTimePicker 日期时间选择器
elementui
xrkhy3 天前
ElementUI之Upload 上传的使用
前端·elementui
小菜全3 天前
使用UniApp实现下拉框和表格组件页面
开发语言·前端·javascript·elementui·前端框架·html
咔叽布吉5 天前
【前端】ElementPlus表单数组形式数据自定义校验(必填)
前端·elementui
几度风雨见丹心5 天前
vue+elementUI 进行表格行内新增及校验,同行其他输入框数据影响当前输入框校验结果
前端·vue.js·elementui
ikun778g8 天前
elemen ui Table表格中添加图片
前端·ui·elementui
程序员的世界你不懂8 天前
【Flask】测试平台开发,应用管理模块实现-第十一篇
vue.js·elementui·flask