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>

 

更多文章:
Html5shiv 讓 IE8以下瀏覽器支援Html5語意標籤!
  • 作者:secret
  • 發布
  • 分類:JavaScript

*限 150 個字以下

廣告