---
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) 頁面則是可以根據他提供的選擇加上客製化的樣式，例如：


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](https://mymth.github.io/vanillajs-datepicker/#/?id=using-from-browser)，詳細使用方式可查看 [Home 頁面](https://mymth.github.io/vanillajs-datepicker/#/?id=using-from-browser)

CSS:

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

JS:

<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/#/) 做出第六週設計稿上的日曆功能，如圖：


HTML:

<div class="container">
  <div class="row">
    <div class="col-6">
      <input type="text" placeholder="請選擇日期" name="datepicker" class="form-control">
    </div>
  </div>
</div>

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:

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://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)|