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

相关推荐
我的心巴14 小时前
vue-print-nb 打印相关问题
前端·vue.js·elementui
Amy_cx1 天前
在表单输入框按回车页面刷新的问题
前端·elementui
xiaogg36781 天前
网站首页菜单顶部下拉上下布局以及可关闭标签页实现vue+elementui
javascript·vue.js·elementui
白云~️2 天前
table表格合并,循环渲染样式
javascript·vue.js·elementui
夏之小星星2 天前
解决el-select选择框右侧下拉箭头遮挡文字问题
前端·vue.js·elementui
xiaogg36782 天前
网站首页菜单两种布局vue+elementui顶部和左侧栏导航
前端·vue.js·elementui
Luffe船长3 天前
elementUI点击浏览table所选行数据查看文档
javascript·elementui·vue
入行IT两年半3 天前
element-plus 单选组件 el-radio,选不上,又没报错,直接复制官网也不行解决方案
前端·vue.js·elementui
IT瘾君3 天前
JavaWeb:前端工程化-ElementPlus
前端·elementui·node.js·vue
William Dawson3 天前
【从前端到后端导入excel文件实现批量导入-笔记模仿芋道源码的《系统管理-用户管理-导入-批量导入》】
java·前端·笔记·elementui·typescript·excel