# 1221 工作紡
## 安裝select2
先從官網引入範例
貼在專案中任一頁來確認效果
現在會是瀏覽器預設的形式

在終端機安裝：`$ yarn add select2`
安裝後到app/javascript/packs的application.js裡加上

import 'select2'
import 'select2/dist/css/select2.css'

來引入select2與select2使用的CSS
瀏覽器會出現錯誤，因為erb裡沒有$可以使用
到app/javascript/packs的application.js裡加上

import $ from 'jquery'  //引入jquery的$
window.$ = $            //將$綁定在window上變成全域

回到瀏覽器就可以看到範例程式變成select2的效果

---
## 安裝sweetalert2
從官網引入範例
貼在專案中任一頁來確認效果
在終端機安裝：`$ yarn add sweetalert2`
網頁出現錯誤，缺少Swal
到app/javascript/packs的application.js裡加上

import Swal from 'sweetalert2'
//Swal是sweetalert2的打包名稱
//不能用import sweetalert2
//詳細從官方文件查詢
window.Swal = Swal

就可以出現彈出使窗的效果

---
## 安裝datetimepicker
從官網引入範例

貼在專案中任一頁來確認效果

在終端機安裝：`$ yarn add tempusdominus-bootstrap-4`

網頁出現錯誤
到app/javascript/packs的application.js裡加上

import 'tempusdominus-bootstrap-4';
import 'tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css'

網頁又會出現錯誤缺少jqery，這是因為套件本身的問題，要從webpacker再次引入jquery
到[webpacker官網]的Plugins
(https://github.com/rails/webpacker/blob/master/docs/webpack.md)
在config/webpack的environment.js加入所需要的程式碼
修改config的檔案後需要重開rails s
又會出現缺少moment.js錯誤
一樣在config/webpack的environment.js引入
就可以呈現日曆效果
接下來要做出日曆圖案
到[https://yarnpkg.com/package/font-awesome]
安裝font-awesome：`$ yarn add font-awesome`
在node_modules/font-awesome/css找到font-awesome.css然後引入
回到瀏覽器就可以看到日曆圖案已經出現了
另外之所以引入font-awesome.css就會在正確位置出現
圖案是因為datetimepicker本身就已經寫入font-awesome的標籤