---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/24(二) 每日任務

## 介紹 vanillajs-datepicker

[Overviews](https://mymth.github.io/vanillajs-datepicker/#/overview) 頁面有先介紹了這個套件的外觀型態

[Options](https://mymth.github.io/vanillajs-datepicker/#/options?id=options) 頁面則是可以根據他提供的選擇加上客製化的樣式，例如：


autohide，下方的說明文字解釋這個功能是在選擇一個日期後，下拉的選擇器會立即關閉

若還是不清楚套用後的結果，可以透過官方提供的 [Live Demo](https://raw.githack.com/mymth/vanillajs-datepicker/v1.1.4/demo/bs4.html) 線上測試功能

### 要如何寫程式碼的部分？
以 autohide 為例，可以看到他有一個(Type)型別為 Boolean ，所以在寫值的時候只能是 true 或是 false，且(Default)預設狀態為 false （代表不會立即關閉）
以下是範例：

const elem = document.querySelector('input[name="datepicker"]');
const datepicker = new Datepicker(elem, {
  autohide: true,
}); 

---

使用前須引入 CDN，詳細使用方式可查看 [Home 頁面](https://mymth.github.io/vanillajs-datepicker/#/?id=using-from-browser)

CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css">

JS:

<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js"></script>

## 題目

使用 [vanillajs-datepicker](https://mymth.github.io/vanillajs-datepicker/#/) 做出第八週設計稿上的月曆功能，如圖：

HTML:

<input type="text" placeholder="MM/DD/YYYY" name="datepicker">

CSS:

.primary{
  color: #907A7B;
}
.datepicker-cell.selected, .datepicker-cell.selected:hover {
  background-color: #907A7B;
}

JS:

const elem = document.querySelector('input[name="datepicker"]');
const datepicker = new Datepicker(elem, {
  ...
}); 

## 回報流程

1. 請將解答寫在 Codepen 再將連結貼至「回報區」中回報


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/poPOzeg) 若答案有爭議可以提出-->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/zYzYoYY
-->

<!-- 1. lumei
Codepen：
https://codepen.io/l_umei/pen/MWoWObb
-->

<!-- 2. Lina Chen
codepen: https://codepen.io/LinaChen/pen/VwWwrPG
-->

<!-- 3. 蔡明達
CodePen: https://codepen.io/bmzpfyxe/pen/NWgKQZB
-->

<!--4. Cheng Pei-hsuan
Codepen: https://codepen.io/PaCheng/pen/powzYoy
-->
<!-- 5.大衛
codepen:https://codepen.io/exnsrpjc/pen/MWoWOzv
-->

<!-- 6. hellocrab
https://codepen.io/hellocrab/pen/RwgwjdX
-->

<!-- 7. Gui
https://codepen.io/guitimliu/pen/XWgWVmB
-->

<!-- 8.WilsonHan
https://codepen.io/wi0821/pen/GREROGV
-->

<!-- 9. Sz
https://codepen.io/szyln/pen/LYLYedY
-->

<!-- 10. Cate Chang
https://codepen.io/tutz/pen/zYzYpWb
-->

<!-- 11. Joe Kuo
https://codepen.io/alertislow/pen/dyRydQZ
-->

<!-- 12. 雷古娜
codepen: https://codepen.io/tinahopo/pen/KKqKydd -->

<!-- 13. curry
https://codepen.io/Ted19851223/pen/BaZaPyE
-->

<!-- 14.黃士桓
https://codepen.io/shr-huan-huang/pen/vYZYQxQ
-->

<!-- 15.沈依蓉
https://codepen.io/lily-oa/pen/ZEyEgRM?editors=0010
-->

<!-- 16. 肉鬆
codepen: https://codepen.io/klrkicog/pen/NWgPxpp
-->

<!-- 17. Jean
codepen: https://codepen.io/jean-liu/pen/PojYrWM
-->

<!-- 18. kevinhes
codepen: https://codepen.io/kevinhes/pen/XWgJdwd
-->

<!-- 19. Jun Chan
codepen: https://codepen.io/chujunchan/pen/VwWYPPx
-->

<!-- 20. Erin Huang
https://codepen.io/ErinHuang/pen/eYRmMeB
-->

<!-- 21. Tori
codepen: https://codepen.io/hayen/pen/VwWYaYj?editors=0110
-->

<!-- 22. ZOE WU
https://codepen.io/Zoechiueh/pen/RwgWRGj
-->

<!-- 23. Sihle Huang
code : https://codepen.io/bugbug777/pen/RwgWmMa
-->

<!-- 24. KK
code : https://codepen.io/potatokaka/pen/YzQwvmw
-->

<!-- 25. AKI
https://codepen.io/akichen27/pen/rNwLyXW
-->

<!-- 25. 鉦勝
https://codepen.io/atckmax823/pen/dyRXWGK
-->

<!-- 26. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/qBjaOXG
-->

<!-- 27. Tina Yen
codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/YzQGNZK
-->

<!--28. jimmyFang
https://codepen.io/pohxiqqo/pen/xxrgYjg
-->

<!-- 29.袁祥恩
codepen:https://codepen.io/ovfxsavp-the-bashful/pen/JjJEWVd
-->

<!-- 30.yurie
codepen:https://codepen.io/_u_jung/pen/YzQbwWM
-->