{"id":23654148,"url":"https://github.com/xiaofan9/date-week-range","last_synced_at":"2025-11-20T16:30:17.276Z","repository":{"id":41556310,"uuid":"297985577","full_name":"xiaofan9/date-week-range","owner":"xiaofan9","description":"基于element-ui 源码，改造而成的date-week-range 组件，主要目的是为了实现周的范围选择","archived":false,"fork":false,"pushed_at":"2022-07-05T10:21:08.000Z","size":3074,"stargazers_count":30,"open_issues_count":12,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-29T00:38:10.935Z","etag":null,"topics":["date-picker","date-week","date-week-range","element-ui","element-ui-components","week-range"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiaofan9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-23T13:51:45.000Z","updated_at":"2024-09-10T06:21:40.000Z","dependencies_parsed_at":"2022-08-04T08:30:13.590Z","dependency_job_id":null,"html_url":"https://github.com/xiaofan9/date-week-range","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaofan9%2Fdate-week-range","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaofan9%2Fdate-week-range/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaofan9%2Fdate-week-range/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaofan9%2Fdate-week-range/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaofan9","download_url":"https://codeload.github.com/xiaofan9/date-week-range/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239619469,"owners_count":19669449,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["date-picker","date-week","date-week-range","element-ui","element-ui-components","week-range"],"created_at":"2024-12-28T18:57:16.680Z","updated_at":"2025-11-20T16:30:17.210Z","avatar_url":"https://github.com/xiaofan9.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"## date-week-range（周范围选择器）\n\n\u003e v1 版本基于 element-ui 2.x 开发，可依赖 element-ui 2.x 使用；也可独立使用，但要引入相应的样式\n\n\u003e v2 版本基于 element-plus 开发。可依赖 element-plus 使用；也可独立使用，但要引入相应的样式。\n\n[v1 版本传送门](https://github.com/xiaofan9/date-week-range/tree/v1)\n\n### 示例\n\n[v1 版本](https://codepen.io/xiaofan9/pen/jOByExo)、[v2 版本](https://codepen.io/xiaofan9/pen/dyvNPjV)\n\n### 目的\n\n  - 项目需求，需要用到周选择器这功能，但没找到相应的组件库，故自己基于 element-ui/element-plus 改造了个。\n\n\n### 兼容\n\n  - v1 版本，对应v1分支，仅支持vue2\n  - v2 版本，对应v2分支，仅支持vue3\n\n### 计划\n\n  - ~~1.x 版本，支持 vue2（已完成）~~\n  - ~~2.x 版本，将进行支持 vue3，计划通过 date-week-range@next 方式升级使用。~~\n  - ~~等待vue3稳定，将会把主版本从 v1 切换至 v2 ，master 分支亦将会同步成 v2 分支。~~\n\n### 注意\n\n  - 不会自动注入css，需手动引入，以避免出现样式覆盖情况；如果全局引入了 element-plus 样式，则不需额外引入！\n  \n  - 本地开发模式，默认使用esm模块，如需转义成es5，请参考：\n  \n  ```javascript\n    // 在 vue-cli 将指定的 node_modules 模块转义成es5：\n    // vue.config.js\n    module.exports = {\n      // 省略代码\n      transpileDependencies: ['date-week-range', 'element-plus']\n    }\n  ```\n\n### 安装 \u0026\u0026 引入\n\n\u003e * #### 安装\n\n``` bash\nnpm install date-week-range@next --save\nyarn add date-week-range@next --save\n```\n\u003e * #### 注册\n\n##### 全局注册\n\n```javascript\nimport DateWeekRange from 'date-week-range'\nimport { createApp } from 'vue'\n\n// 引入样式；如果全局引入了 element-plus 样式，则无需再次引入\n\n\n// 全局引入 element-plus 样式\n// import 'element-plus/dist/index.css'\n\n// 或引入\n// import 'element-plus/theme-chalk/el-icon.css'\n// import 'element-plus/theme-chalk/el-date-picker.css'\n// import 'element-plus/theme-chalk/el-var.css';\n\n// 或引入\n// import 'date-week-range/index.css'\n\nconst app = createApp({\n  /* ... */\n})\n\napp.use(DateWeekRange)\n```\n\n##### 局部注册\n\n```javascript\n\u003ctemplate\u003e\n  \u003cDateWeekRange v-model=\"test\"\u003e\u003c/DateWeekRange\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { DateWeekRange } from 'date-week-range'\n// 注意要引入样式！引入方式参考上面\n\nexport default {\n  data() {\n    return {\n      test: ''\n    }\n  },\n  components: {\n    DateWeekRange\n  }\n}\n\u003c/script\u003e\n```\n\n##### 浏览器使用\n\n```html\n\u003c!-- 引入样式。如果全局引入了element-plus 样式，则不需额外引入 --\u003e\n\u003c!-- 全局引入 element-plus 样式 --\u003e\n\u003clink type=\"text/css\" href=\"https://unpkg.com/element-plus/lib/theme-chalk/index.css\"\u003e\n\u003c!-- 或者额外引入 --\u003e\n\u003clink type=\"text/css\" href=\"https://unpkg.com/element-plus/lib/theme-chalk/el-icon.css\"\u003e\n\u003clink type=\"text/css\" href=\"https://unpkg.com/element-plus/lib/theme-chalk/el-date-picker.css\"\u003e\n\n\u003cscript src=\"https://unpkg.com/date-week-range@next\"\u003e\u003c/script\u003e\n\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdate-week-range v-model=\"test\"\u003e\u003c/date-week-range\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n\n\u003cscript\u003e\nconst app = window.Vue.createApp({\n  data() {\n    return {\n      test: ''\n    }\n  }\n})\napp.use(window.DateWeekRange)\napp.mount(\"#app\")\n\u003c/script\u003e\n```\n\n### 国际化\n\n\u003e 默认使用中文\n\n全局注册时\n```javascript\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport DateWeekRange from 'date-week-range'\nimport 'dayjs/locale/zh-cn'\nimport locale from 'element-plus/lib/locale/lang/zh-cn'\n\nconst app = createApp(App)\n\napp.use(DateWeekRange, { locale })\napp.mount('#app')\n\nexport default app\n```\n\n局部注册时\n```javascript\n\u003cscript\u003e\nimport { DateWeekRange, locale } from 'date-week-range'\nimport lang from 'element-plus/lib/locale/lang/zh-cn'\nimport 'dayjs/locale/zh-cn'\n\nlocale(lang)\n/* 省略… */\n\u003c/script\u003e\n```\n\n### 文档\n\n本插件是在 element-plus 框架中的 el-date-picker 组件基础上进行开发，其文档和 [el-date-picker组件](https://element-plus.org/#/zh-CN/component/date-picker) type=\"daterange\" 一致。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaofan9%2Fdate-week-range","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaofan9%2Fdate-week-range","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaofan9%2Fdate-week-range/lists"}