Tempus Dominus - Bootstrap 4 可以用的時間日期選擇器

升上Bootstrap 4 後，可能會遇到日期時間選擇器跑版的問題，而原先的 Eonasdan/bootstrap-datetimepicker 也沒有升級至Bootstrap 4，因此我在網路上找到 Tempus Dominus，總算解決了日期時間選擇器的問題！

Tempus Dominus

網址：https://tempusdominus.github.io/bootstrap-4/

使用方法

引入 Tempus Dominus 後，在頁面中加入下列 input 與 JS (INPUT-ID記得換掉)，就可以使用啦~

<input id="INPUT_ID" type="text" value="" placeholder="請選擇時間與日期" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#INPUT_ID" required>
<script>
$(function(){
 $('#INPUT ID').datetimepicker();
});
</script>

如何中文化 + Font Awesome 5 一起使用?

原版的Tempus Domiuns是 英文介面 搭配 Font Awesome的組合，但我使用時發現有些圖示會缺，因此在這裡做個補充

首先，將moment.js 的來源換成包含各語系的 moment-with-locales.min.js。

接下來，使用以下Script替換上面的：

<script>
$(function(){
 $('#INPUT ID').datetimepicker({
      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
 });
});
</script>

 

  • 作者：secret
  • 在 發布
  • 分類：JavaScript