# Bootstrap-Datepicker
###### tags: `實作功能`

## 載入元件

### Style

<link href="~/Content/bootstrap-datepicker.min.css" rel="stylesheet" />

### Script

<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.zh-TW.min.js"></script>

#### zh-Tw.min.js內容

!function(a){
    a.fn.datepicker.dates["zh-TW"]={
        days:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
        daysShort:["週日","週一","週二","週三","週四","週五","週六"],
        daysMin:["日","一","二","三","四","五","六"],
        months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        monthsShort:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        today:"今天",format:"yyyy年mm月dd日",weekStart:1,clear:"清除"
        }
}(jQuery);

---

### 用法

#### 普遍用法 ( 用在 Input 上)

HTML

<input type="text" id="datepicker1" />

Script

$('#datepicker1').datepicker({
    format: 'yyyy/mm/dd',
    language: "zh-TW",
    autoclose: true,
    todayBtn: true,
    todayHighlight: true
});

---

#### 特殊用法 ( 不用 Input 只用 Button )
HTML

<button class="btn btn-info" id="btnChooseDate">選擇時間</button>

Script

$('#btnChooseDate').datepicker({
    format: 'yyyy-mm',            
    language: "zh-TW",
    startView: "months", // 從月份開始選
    minViewMode: "months", // 只選到月份
    autoclose: true, // 選好後自動關閉 ( ※一定要全小寫，不然沒用 )
}).on('changeMonth', function (e) { // changeMonth 事件
    $('#calendar').fullCalendar('gotoDate', e.date); // 搭配fullCalendar選日期的用法
    // event 內容↓↓↓
    console.log(e.date); // 回傳 Date 格式 Ex.Mon Jun 01 2020 00:00:00 GMT+0800 (台北標準時間)
    console.log(e.dates); // 選擇的歷史時間，選第一筆時沒資料
    console.log(e.format(0, "dd/mm/yyyy")); // 格式化 dates 中的時間。參數1 為 Index；參數2 為想要的格式
});