{"id":23219182,"url":"https://github.com/fizzyelt/chakra-datepicker-vite","last_synced_at":"2025-09-12T02:17:54.396Z","repository":{"id":38452301,"uuid":"407913749","full_name":"FizzyElt/chakra-datepicker-vite","owner":"FizzyElt","description":"datePicker implementation","archived":false,"fork":false,"pushed_at":"2025-03-16T14:53:56.000Z","size":356,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-19T08:46:44.714Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FizzyElt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-09-18T16:39:13.000Z","updated_at":"2025-03-16T14:54:01.000Z","dependencies_parsed_at":"2025-03-16T16:32:05.991Z","dependency_job_id":null,"html_url":"https://github.com/FizzyElt/chakra-datepicker-vite","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/FizzyElt/chakra-datepicker-vite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FizzyElt%2Fchakra-datepicker-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FizzyElt%2Fchakra-datepicker-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FizzyElt%2Fchakra-datepicker-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FizzyElt%2Fchakra-datepicker-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FizzyElt","download_url":"https://codeload.github.com/FizzyElt/chakra-datepicker-vite/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FizzyElt%2Fchakra-datepicker-vite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274743226,"owners_count":25341134,"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","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-18T21:20:04.732Z","updated_at":"2025-09-12T02:17:54.315Z","avatar_url":"https://github.com/FizzyElt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## chakra DatePicker\n[Demo (PC only)](https://chakra-datepicker.netlify.app/)\n\n### 專案目的\n有時我們常使用現成的 DatePicker 組件來實現需求，但總會遇到很多限制，例如**樣式不好改**、**功能被限制**、**整體風格跟畫面不符**，因為上述原因我決定自己嘗試設計了 DatePicker 組件，在專案中有不錯的成效，包含功能的彈性跟樣式的修改。\n\n當然有優點也會伴隨一些缺點，但我認為這些是工程師們需要做取捨的，因為沒有絕對的好或不好，只有適不適合，我也會以我自己的觀點分析好壞。\n\n要注意的是，本作品目的不在於**提供**一個 DatePicker 組件，而是提供給各位設計 DatePicker 的想法跟思路，以便你在各種專案做變化。\n\n### 1. 組件拆解（以選擇單天為例）\n設計複雜組件前通常會將組件拆解成各個小部分，於是我把 DatePicker 分成以下三部分\n```js\n\u003cControlBar /\u003e\n\u003cWeek /\u003e\n\u003cCalendar /\u003e\n```\n#### ControlBar\n這個組件主要是用來做年月切換操作的 component ，由於本身並不複雜，頂多會有一些樣式調整，所以不多做說明。\n\n#### Week\n單獨顯示一個星期文字的 component ，因為星期永遠不變，所以也只會有樣式的修改。\n\n#### Calendar\nCalendar 是整個 DatePicker 的核心，他的功能包含了顯示整個月的天數，每天要根據你的資料顯示不同樣式，還有最重要的選時間功能。\n\n### 2. Calendar 組件設計\n為了顯示當月的天數，我們要設計一個產出列表的 function ，於是 dayListGenerator 就誕生了，為了方便我用了 date-fns 做了一些輔助。\n\n```ts\nexport default function dayListGenerator(\n  year: number,\n  month: number,\n  dateTypeRuleFn: DateRulesFn,\n): Array\u003c{\n  date: Date;\n  year: number;\n  month: number;\n  day: number;\n  dayType: DayType;\n}\u003e {\n  const startDate = startOfWeek(new Date(year, month, 1));\n\n  return Array.from({ length: 42 }, (_, index) =\u003e {\n    const date = addDays(startDate, index);\n    return {\n      date,\n      year: getYear(date),\n      month: getMonth(date),\n      day: getDate(date),\n      dayType:\n        getMonth(date) === month \u0026\u0026 getYear(date) === year ? dateTypeRuleFn(date) : DayType.NONE,\n    };\n  });\n}\n```\n\n#### 設計 day 的樣式\n根據需求，你的 DatePicker 每一天肯定會有不同樣式(如被點選、或是被禁止點選...)，以下是這個專案 day 的所有樣式的 type：\n\n```ts\nexport enum DayType {\n  NONE = 'NONE',\n  NORMAL = 'NORMAL',\n  DISABLE = 'DISABLE',\n  ACTIVE = 'ACTIVE',\n  PERIOD = 'PERIOD',\n  ACTIVE_START = 'ACTIVE_START',\n  ACTIVE_END = 'ACTIVE_END',\n}\n```\n你可以根據需求自己增加或刪除都可以。\n\n#### DateTypeRuleFn\n你可能會疑惑 dayListGenerator 的 dateTypeRuleFn 參數是做什麽的 ?\n\n然而這個 function 是整個 DatePicker 最關鍵的一部份，他的作用是讓你在外部根據你的資料寫好一個回傳各種不同 dayType 的**規則**，讓 dayListGenerator 產出 Day 組件需要顯示的樣式。\n\n```ts\nconst handleDayRulesFn = (date: Date): DayType =\u003e {\n  if (format(date, 'yyyy/MM/dd') ===  format(selectedDate, 'yyyy/MM/dd')) {\n    return DayType.ACTIVE;\n  }  \n\n  return DayType.NORMAL;\n};\n```\n\n示意圖\u003cbr/\u003e\n![demo](./README_IMAGE/datepicker.png)\n\n### 優點\n- Day 的樣式可隨意增加刪減，可做出最符合專案樣式風格的樣子。\n- dateRulesFn 使功能不再被限制，資料格式可以自己訂完後自己撰寫顯示規則，一切以單個 day 思考。\n- Calendar 可以隨意增加刪減，想顯示兩個月就多加一個上去，兩 Calendar 資料不會彼此依賴，只要dateRulesFn 是共用的即可，或是想要兩個月用不同規則顯示也可以。\n\n### 缺點\n- 元件被拆成各個部分，必須自己組合成自己要的形式\n- Day 的樣式最好有個規範(如寬、高等等...)，否則容易跑版或不如預期\n- 被強迫以單個 day 來思考及撰寫顯示規則，對初學者可能不是那麼容易，可讀性可能也沒那麼好\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffizzyelt%2Fchakra-datepicker-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffizzyelt%2Fchakra-datepicker-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffizzyelt%2Fchakra-datepicker-vite/lists"}