[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fARneRbt6xRLxhCJvXLoAv_Sdnx60YBQXJ-oXDevEftg":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},139,"2024-11-27T11:10:01.438Z","element plus使用范围为一周的日期选择组件(el-date-picker), 周一到周日 和 周日到周六","在引入element-plus组件库的项目中，使用date picker组件选择周范围的日期时，如何设置周范围从周日到周六。\n\n在默认情况下，尤其是中文时区的项目中，默认的周范围选择是周一到周日的7天，但是在出海业务中，经常会遇到要使用周日到周六的7天范围。\n\nelment-plus中有一个非常方便的组件`el-date-picker`\n\n解释一下，我们使用的周选择器效果图：\n![周一到周日](https://image.xinwei.ltd/11732704674655.png)\n这是默认情况下的的情况，如图所示，选择的是周一到周日的时间范围，只要点击其中某一个日期，那么范围会廊括这个日期在内的一周。\n代码是：\n```vue\n...\n\u003Cel-date-picker\n    v-model=\"dates\"\n    type=\"week\"\n    :format=\"`${searchData.st} - ${searchData.et}`\"\n    placeholder=\"Pick a week\"\n    @change=\"handleWeekChange\"\n/>\n...\n\nimport {dayjs, ElMessage} from 'element-plus';\n...\nconst dates = ref();\nconst searchData = reactive({\n    ...\n    st: '',\n    et: '',\n    ...\n})\n...\n\nfunction handleWeekChange(value){\n    if (value) {\n        getTime(value)\n    }\n}\n\nfunction getTime(value){\n    const start = dayjs(value).startOf('week').format('YYYY-MM-DD');\n    const end = dayjs(value).endOf('week').format('YYYY-MM-DD');\n    searchData.st = start;\n    searchData.et = end;\n}\n```\n\n那么如何将上面截图中的“周一到周日”的范围，改成“周日到周六”的范围呢？\n\n其实elment plus在官网中已经说明了：[https://element-plus.org/zh-CN/guide/i18n.html](https://element-plus.org/zh-CN/guide/i18n.html)\n\n![element-plus datepicker](https://image.xinwei.ltd/21732705335452.png)\n\n那么我们需要做的操作就是将dayjs的的locale进行修改，其他的组件使用完全不用动。\n\n在`main.ts`中直接`import` `dayjs`的locale文件即可：\n```main.ts\nimport 'dayjs/locale/en'\n```\n\n当然你还可以直接从element-plus中export出dayjs，然后调用方法也行：\n```main.ts\n...\nimport ElementPlus, { dayjs } from 'element-plus';\n...\n\ndayjs.locale('en');\n...\n```\n\n得到的效果如下：\n![周日到周六](https://image.xinwei.ltd/31732705632008.png)\n\n\n欢迎大家多多关注公众号\"新卫网络科技\".\n\n\n","在引入element-plus组件库的项目中，使用date picker组件选择周范围的日期时，如何设置周范围从周日到周六。","https://image.xinwei.ltd/11732704674655.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],"",1733,0,"el-date-picker,element plus date picker,week type date picker,vue date picker,vue week picker,element-plus"]