--- tags: 網頁切版直播班 - 2022 夏季班 --- # 🏅 Day 41 ## vanillajs-datepicker 日曆套件 ### 介紹 vanillajs-datepicker [Overviews](https://mymth.github.io/vanillajs-datepicker/#/overview) 頁面有先介紹了這個套件的外觀型態 [Options](https://mymth.github.io/vanillajs-datepicker/#/options?id=options) 頁面則是可以根據他提供的選擇加上客製化的樣式，例如： ![](https://i.imgur.com/RbkQsSF.png) autohide，下方的說明文字解釋這個功能是在選擇一個日期後，下拉的選擇器會立即關閉 若還是不清楚套用後的結果，可以透過官方提供的 [Live Demo](https://raw.githack.com/mymth/vanillajs-datepicker/v1.1.4/demo/bs4.html) 線上測試功能 ### 要如何寫程式碼的部分？ 以 autohide 為例，可以看到他有一個(Type)型別為 Boolean ，所以在寫值的時候只能是 true 或是 false，且(Default)預設狀態為 false （代表不會立即關閉） 以下是範例： ```javascript= const elem = document.querySelector('input[name="datepicker"]'); const datepicker = new Datepicker(elem, { autohide: true, }); ``` --- 使用前須引入 [CDN](https://mymth.github.io/vanillajs-datepicker/#/?id=using-from-browser)，詳細使用方式可查看 [Home 頁面](https://mymth.github.io/vanillajs-datepicker/#/?id=using-from-browser) CSS: ```htmlembedded <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css"> ``` JS: ```javascript <script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/datepicker-full.min.js"></script> ``` ### 題目 使用 [vanillajs-datepicker](https://mymth.github.io/vanillajs-datepicker/#/) 做出第六週設計稿上的日曆功能，如圖： ![](https://i.imgur.com/Hdp3DTp.png) HTML: ```htmlembedded= <div class="container"> <div class="row"> <div class="col-6"> <input type="text" placeholder="請選擇日期" name="datepicker" class="form-control"> </div> </div> </div> ``` CSS: ```css= body { background-color: #1C1C1C; } input { padding: 8px 16px; } .form-control, .form-control:focus { border-color: #FFFFFF; background-color: transparent; color: #C1C1C1; } .datepicker-cell:not(.disabled):hover { background-color: #e8e8e8; } .datepicker-cell.selected, .datepicker-cell.selected:hover { background-color: #e8e8e8; color: #000; } ``` JS: ```javascript= const elem = document.querySelector('input[name="datepicker"]'); const datepicker = new Datepicker(elem, { ... }); ``` > 需載入 [Bootstrap](https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/#css) ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答：https://codepen.io/hexschool/pen/LYdgJLr --> 回報區 --- | Discord | CodePen / 答案 | |:--------------:|:------------------------------------------------------------------:| | YC#2522 | [CodePen](https://codepen.io/YCLu/pen/yLKwOYY) | | Daisy_Li#4231 | [CodePen](https://codepen.io/lidairong-gmail-com/pen/ZExPWLB) | | Karol-Kuo#5287 | [CodePen](https://codepen.io/ting-yu-kuo/pen/LYdaNxd?editors=1010) | | LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/wvmOGWL) | | Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/PoRLNJv) | | 布魯諾#7239 | [Codepen](https://codepen.io/bruno-yu/pen/ExEMKjW?editors=1111) | | Hsiu#8767 | [Codepen](https://codepen.io/amy-hsiu/pen/wvmOGmv) | | bonnieli1414#4906 | [Codepen](https://codepen.io/bonnieli1414/pen/YzagqRg) | | azami#5986 |[CodePen](https://codepen.io/azami/pen/oNqVxrm)| |int#7518|[Codepen](https://codepen.io/intHuang/pen/poLYbpL)| |WEI_RIO#9342|[CodePen](https://codepen.io/wei_wu/pen/dymrMzj?editors=1111)| | yuyu#6310 |[CodePen](https://codepen.io/yuyu0905/pen/dymrpGp)| |威0#6919|[codepen](https://codepen.io/n0918679182/pen/KKoEgpG)| | 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/NWYJRvO) | | JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/MWVxjod)| | 𝓛𝓊𝒸𝓎#8635 |[codepen](https://codepen.io/lucygirl/pen/wvmOoMb)| | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/MWVxbEb) | | 雷雷#7844 | [CodePen](https://codepen.io/lei-yi-jie/pen/KKoENYa) | |Benson#6763|[CodePen](https://codepen.io/kumashow/pen/ExErMEJ)| |kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/VwXRPge)| |Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/rNdRjpq?editors=1010)| |Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/JjLzWxW)| |我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/wvmOdeV)| |suihsilan#9485|[CodePen](https://codepen.io/suihsilan/pen/VwXRbJR)| |Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/bGvZrNL)| |Clara#1275|[CodePen](https://codepen.io/bsupixqu/pen/abYMVMg)| |ssozr#4680|[codepen](https://codepen.io/ssozr/pen/wvmOpJj)| |yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/LYdaerx)| | Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/mdxoEzr) | | 黃士桓#7654 | [codePen]()* 抱歉不小心刪掉你的code，因為滑鼠複製兩個網址，蓋掉了你的網址。煩請補回，對不起!| | 大衛#4869 | [codePen](https://codepen.io/exnsrpjc/pen/RwMdqBW) | |zera#6060|[codepen](https://codepen.io/zera-tseng/pen/vYRPKKB)| |Henry#7386| [CodePen](https://codepen.io/h1nr9/pen/gOeEJzE)| |Cliff#4606|[codepen](https://codepen.io/Cliff_hex/pen/MWVxMav)| |CloThEs#7837|[codepen](https://codepen.io/CloThEsZ/pen/jOzREVp)| |鉦勝 #8333|[codepen](https://codepen.io/atckmax823/pen/oNqOBPr)| |QOO #8446|[codepen](https://codepen.io/QOOQOOQ/pen/mdxogrW)| |PeggyLiao#1552|[CodePen](https://codepen.io/PeiJu-Liao/pen/BarEZvQ?editors=1010)| |Ke#1391|[Codepen](https://codepen.io/federerke/pen/xxWeLOv)| |L0F0#8733|[Codepen](https://codepen.io/l0f0/pen/PoRgEaO?editors=1000)| | Amberhh #2465 | [Codepen](https://codepen.io/Amberhh/pen/YzabzNB)| |SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/rNdgzrb)| |YI#0863|[Codepen](https://codepen.io/YI0305/pen/PoRvQEB)| |Yen#5757|[Codepen](https://codepen.io/atckmax823/pen/oNqOBPr)| |黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/oNqrzGK)| |yo_yo#2678 | [CodePen](https://codepen.io/djmliogn-the-flexboxer/pen/mdxZoPj)| |Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/ZExdZbX)| |kevin8349#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/RwMXKEE)| |mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/GRxVaXv)| |IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/QWrLGzB)| |piha#9987|[Codepen](https://codepen.io/pihahaha/pen/oNdvJXq)| |Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/WNJvLBV)| |Clara Cai#7097|[Codepen](https://codepen.io/Clara-Snowy/pen/ExLVdyW)| |Vera#5592|[Codepen](https://codepen.io/skvera/pen/rNvmWKJ) |Melon#0380|[Codepen](https://codepen.io/BalaFang/pen/poVwdNd) |Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/JjvZYrj)|