# Bootstrap 4 Datetimepicker
###### tags: `語法堂`

[套件-Tempus Dominus](https://tempusdominus.github.io/bootstrap-4/)
[套件-載有語系的 moment.js](https://momentjs.com/)

## 引入套件

### Style
* tempusdominus-bootstrap-4.min.css

### Script
* Juqery.js
* moment-with-locale.js
* tempusdominus-bootstrap-4.min.js

## 實作
### Script

$(function(){
  initialDateTimepicker("#Filter_StartTime");
})

// 新增datetimepicker到文字方塊
function initialDateTimepicker(selector) {
    $(selector).datetimepicker({
        format: "YYYY-MM-DD HH:mm",
        locale: "zh-TW",
        icons: {
            time: "far fa-clock",
            date: 'fas fa-calendar',
            up: 'fas fa-arrow-up',
            down: 'fas fa-arrow-down',
            previous: 'fas fa-chevron-left',
            next: 'fas fa-chevron-right',
            today: 'fas fa-calendar-check-o',
            clear: 'fas fa-trash',
            close: 'fas fa-times'
        }//更換icon
    });
}

## Html

<input class="form-control datetimepicker-input" data-target="#Filter_StartTime" data-toggle="datetimepicker" id="Filter_StartTime" name="Filter_StartTime" type="text" value="">

---

## 參考來源

[參考-Tempus Dominus - Bootstrap 4 可以用的時間日期選擇器](https://gdsecret.com/post-70.html)