Feature Datepicker
還沒有人認領這個 Issue。
評估
- 難度
- 2/5
- 預估耗時
- 1-3 小時
- 新手友好度
- 50/100
- Issue 類型
- 功能
- 描述清晰度
- 基本清楚
- 活躍度
- 停滯
- 技術堆疊
- javascript
- 領域
- frontend
研究方向
從預訂表格元件開始，查看 issue 中連結的 js-datepicker 基本使用指南。加入該套件，為入住和退房輸入框設定不同的 ID，並分別建立一個 picker。點擊任一輸入框時顯示日期選擇器即表示完成。
由索引模型根據 Issue 內容生成。
描述
28. Date picker
Instructions: Add the js-datepicker package to your project using npm install, and import it at the top of your booking table component. Add different IDs to your 'check in date' and 'check out date' <input> elements, then create two date pickers using const checkInPicker = datepicker(YOUR_ID) (where YOUR_ID is the ID you assigned to your check in/check out date elements).
Hint: Read the js-datepicker usage guide
Test:
The date picker appears when you click on the 'check in date' and 'check out date' input elements.
Reflection:
Using js-datepicker in this exercise allows you to practice installing and working with packages in JavaScript.
Packages contain new functions and properties to work with that may not be available in native JavaScript/HTML. Using packages can often save time instead of writing your own functions, as you are importing code that someone else has written. However, this can have downsides:
- not all packages are high quality
- some may have bugs or may reduce accessibility by recreating native elements
(js-datepicker recreates HTML's native datepicker element)
Think about some of the code you have written in this project. Are there any packages available that might have helped you to complete the features?
For example, #26 used validation. Searching npmjs.com for 'validate' shows multiple packages, such as 'validator' and 'Validate'.
Open both of these packages in your browser, and consider the following questions:
- Is it clear what this package does? Will it solve my specific problem better than writing my own code?
- Do I trust that the code in this package is safe to run on my machine? Do other people trust this package? (Hint: look at weekly downloads, last update, dependents, and visit the repository)
- Is this package accessible? Will it work on all browsers?
- If I decide to use this package and it breaks, will I know how to fix it or replace it?
- 主要語言
- JavaScript
- 星號
- 1
- 分支
- 28
- PR 合併指標
- 30 天內沒有已合併 PR
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 有 Pull Request 範本
- 沒有貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
CodeYourFuture/React-Module-Project 的其他 Issue
-
♟️ Dependent ticket 🏕 Priority Mandatory 🐇 Size Small 📅 Week 3 📅 Week 4
難度 2/5 1-3 小時 新手友好度 65/100
-
🏕 Priority Mandatory 🐂 Size Medium 📅 Week 4 🧩 Feature
難度 2/5 1-3 小時 新手友好度 65/100
-
🐂 Size Medium 📅 Week 3 🧩 Feature
難度 2/5 1-3 小時 新手友好度 65/100
-
🏝️ Priority Stretch 🐂 Size Medium 📅 Week 2 🧩 Feature
難度 2/5 1-3 小時 新手友好度 65/100
-
🏕 Priority Mandatory 🐇 Size Small 📅 Week 2 🧩 Feature
難度 1/5 1 小時以內 新手友好度 68/100
查看 CodeYourFuture/React-Module-Project 的全部 Issue
相似的 Issue
-
[Bug] Dev image build fails: `npm install` in the root Dockerfile runs out of memory (exit 134)可能已有人在做 @andest01 今天認領。 未關閉
難度 2/5 1-3 小時 新手友好度 75/100
維護者通常 1 天內回覆
-
good first issue hacktoberfest help wanted
難度 2/5 1 小時以內 新手友好度 76/100
pacocartones/free-llm-api-hub#262 ·
維護者通常 1 天內回覆
-
agent-task risk:low
難度 1/5 1-3 小時 新手友好度 88/100
guyellis/http-status-check#512 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 75/100
microsoft/playwright#43327 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 78/100
microsoft/TypeScript#64758 ·
維護者通常 1 天內回覆