Tempus-Dominusbootstrap-日期時間選擇器(bootstrap-4-datetimepicker)

提供了一個強大的日期和時間選擇器，主要用於 Bootstrap 4 專案項目中。

安裝方式

npm

可使用 npm 方式安裝

npm i tempusdominus-bootstrap-4

1	npm i tempusdominus-bootstrap-4

cdn

另外也可以使用 CDN 的方式，將相關的套件與賴件引入專案中。

<!-- fontawesome -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- bootstrap 4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

<!-- tempusdominus-bootstrap-4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous" />


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script>

用於 Bootstrap 4 專案下的相關套件與賴件

如果要使用於 Bootstrap 4 專案，需要先安裝必要的套件依序如下。

Bootstrap.css (v4.x)
fontawesome (v4.x up)
tempusdominus-bootstrap-4.min.css
jQuery (3.5x)
Moment.js (v2.29)
Bootstrap.js (v4.x)
tempusdominus-bootstrap.js

CSS 部份和官方的不太同，主要是希望產生畫面前先透過 CSS 將需要的樣式產生後，再接著產生動態的結構。

使用與設定

bootstrap-4-datetimepicker 初始化基本使用

在 JavaScript 的部份使用 $('#<元素對象>').datetimepicker(); 做初始化。

$(function () {
  $('#datetimepicker1').datetimepicker();
});

$(function () {

$('#datetimepicker1').datetimepicker();

});

See the Pen Tempus-Dominusbootstrap-日期時間選擇器-初始化基本使用 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

繁體中文化

語言環境：moment.js 的語言環境文件在這裡 (moment/locale/) 找到 zh-tw.js 檔的部份，將此檔引加入專案中入後進行設定。

<script src="https://raw.githubusercontent.com/moment/moment/master/locale/zh-tw.js"></script>

1	<script src="https://raw.githubusercontent.com/moment/moment/master/locale/zh-tw.js"></script>

另外，如果使用線上 CDN 的話，就使用下面的連結引入使用。

<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>

1	<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>

將語系檔 zh-tw.js 引入專案後，透過 $.fn.datetimepicker.Constructor.Default = $.extend() 裡的共用共用設定，來設定 moment.locale 繁體中文語系，設定如下。

$(function () {
  /* datetimepicker 初始化與共用設定 -------------------------------------------------- */
  $.fn.datetimepicker.Constructor.Default = $.extend(
    {},
    $.fn.datetimepicker.Constructor.Default,
    {
      // 選擇與設定語系
      locale: moment.locale("zh-tw"),
      // /選擇與設定語系
    }
  );
  /* /datetimepicker 初始化與共用設定 -------------------------------------------------- */

  $("#datetimepicker1").datetimepicker();
});

$(function () {

/* datetimepicker 初始化與共用設定 -------------------------------------------------- */

$.fn.datetimepicker.Constructor.Default = $.extend(

{},

$.fn.datetimepicker.Constructor.Default,

{

// 選擇與設定語系

locale: moment.locale("zh-tw"),

// /選擇與設定語系

}

);

/* /datetimepicker 初始化與共用設定 -------------------------------------------------- */

$("#datetimepicker1").datetimepicker();

});

See the Pen Tempus-Dominusbootstrap-日期時間選擇器-繁體中文化 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

時間格式設定

設定時間格式的部份，同樣也是設定於 $.fn.datetimepicker.Constructor.Default = $.extend() 裡的共用設定。

日期

bootstrap-4-datetimepicker 官方文件：date
返回組件的模型當前日期，moment.js 對象或 null（如果未設置）。
可以透過 moment.js 設定時間物件，如果直接使用 moment("", "YYYY/MM/DD") 的時間格式，要特別注意寫法，主要是第二個參數時間格式使用 "YYYY/MM/DD"，也就是常用的 2021/03/30 這樣的方式，以年/月/日呈現不顯示時分秒。

Tempus Dominus Bootstrap 4 文件寫錯，使用 moment() 要帶二個參數。
資料來源：使用Bootstrap 3 Datepicker v4所引發的moment JS的RFC2822錯誤

時間格式

bootstrap-4-datetimepicker 官方文件：format
format: 'YYYY/MM/DD', 針對 bootstrap-4-datetimepicker 的顯示時間格式方式。

$(function () {
  /* datetimepicker 初始化與共用設定 -------------------------------------------------- */
  $.fn.datetimepicker.Constructor.Default = $.extend(
    {},
    $.fn.datetimepicker.Constructor.Default,
    {
      // 選擇與設定語系
      locale: moment.locale("zh-tw"),
      // /選擇與設定語系
      // 設定時間格式
      date: moment('', 'YYYY/MM/DD'), // Tempus Dominus Bootstrap 4 文件寫錯，使用 moment() 要帶二個參數，資料來源：使用Bootstrap 3 Datepicker v4所引發的moment JS的RFC2822錯誤 (http://slashview.com/archive2018/20180430.html)
      format: 'YYYY/MM/DD', // https://momentjs.com/docs/#/displaying/format/
      // /設定時間格式
    }
  );
  /* /datetimepicker 初始化與共用設定 -------------------------------------------------- */

  $("#datetimepicker1").datetimepicker();
});

$(function () {

/* datetimepicker 初始化與共用設定 -------------------------------------------------- */

$.fn.datetimepicker.Constructor.Default = $.extend(

{},

$.fn.datetimepicker.Constructor.Default,

{

// 選擇與設定語系

locale: moment.locale("zh-tw"),

// /選擇與設定語系

// 設定時間格式

date: moment('', 'YYYY/MM/DD'), // Tempus Dominus Bootstrap 4 文件寫錯，使用 moment() 要帶二個參數，資料來源：使用Bootstrap 3 Datepicker v4所引發的moment JS的RFC2822錯誤 (http://slashview.com/archive2018/20180430.html)

format: 'YYYY/MM/DD', // https://momentjs.com/docs/#/displaying/format/

// /設定時間格式

}

);

/* /datetimepicker 初始化與共用設定 -------------------------------------------------- */

$("#datetimepicker1").datetimepicker();

});

See the Pen Tempus-Dominusbootstrap-日期時間選擇器-繁體中文化+設定時間格式 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

禁用時間

禁選週六日

以週六日休假日來說，進行所有週六日都不能點按，使用 $.fn.datetimepicker.Constructor.Default = $.extend() 裡的共用設定，加入 daysOfWeekDisabled: [0, 6], 啟用禁選週六日。

$(function () {
  /* datetimepicker 初始化與共用設定 -------------------------------------------------- */
  $.fn.datetimepicker.Constructor.Default = $.extend(
    {},
    $.fn.datetimepicker.Constructor.Default,
    {
      // 選擇與設定語系
      locale: moment.locale("zh-tw"),
      // /選擇與設定語系
      // 設定時間格式
      date: moment('', 'YYYY/MM/DD'), // Tempus Dominus Bootstrap 4 文件寫錯，使用 moment() 要帶二個參數，資料來源：使用Bootstrap 3 Datepicker v4所引發的moment JS的RFC2822錯誤 (http://slashview.com/archive2018/20180430.html)
      format: 'YYYY/MM/DD', // https://momentjs.com/docs/#/displaying/format/
      // /設定時間格式
      // 禁選週六日
      daysOfWeekDisabled: [0, 6], // Disabled Days of the Week: https://getdatepicker.com/5-4/Usage/#disabled-days-of-the-week
      // /禁選週六日
    }
  );
  /* /datetimepicker 初始化與共用設定 -------------------------------------------------- */

  $("#datetimepicker1").datetimepicker();
});

$(function () {

/* datetimepicker 初始化與共用設定 -------------------------------------------------- */

$.fn.datetimepicker.Constructor.Default = $.extend(

{},

$.fn.datetimepicker.Constructor.Default,

{

// 選擇與設定語系

locale: moment.locale("zh-tw"),

// /選擇與設定語系

// 設定時間格式

format: 'YYYY/MM/DD', // https://momentjs.com/docs/#/displaying/format/

// /設定時間格式

// 禁選週六日

daysOfWeekDisabled: [0, 6], // Disabled Days of the Week: https://getdatepicker.com/5-4/Usage/#disabled-days-of-the-week

// /禁選週六日

}

);

/* /datetimepicker 初始化與共用設定 -------------------------------------------------- */

$("#datetimepicker1").datetimepicker();

});

See the Pen Tempus-Dominusbootstrap-日期時間選擇器-繁體中文化+設定時間格式+禁選週六日 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

指定對象獨立設定禁選特定日期

禁選特定日期在特定的對象 $("#datetimepicker1")，指對對象後透過方法鍊 .datetimepicker() 裡面帶入 {} 物件參數進行指定對象設定，物件中以屬性 disabledDates: [], 後方的陣列帶著多筆不同的設定時間。

設定時間方式一：使用 moment('時間數值(年/月/日)', '時間格式(YYYY/MM/DD)') 設定。
設定時間方式二：使用原生 JavaScript 時間物件 new Date(時間數值(年, 月, 日)) 來撰寫
設定時間方式三：這個方式不推，直接使用像是 '2021-03-30', '2021/03/31' 字串的時間格式進行設定 (二天禁用)，這樣的方式是可以正常時間，不過會提示警告內容 (提示時間格式 RFC2822 錯誤)，提示內容約如下。
“Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

$("#datetimepicker1").datetimepicker({
  disabledDates: [
    moment('2021/03/24', 'YYYY/MM/DD'), // 使用時間賴件 moment() 方法，指定 "2021/03/24" 日禁用。
    new Date(2021, 2, 26), // 原生 JavaScript nee Date(年、月(0為一月)、日) 操作，禁用 2021/3/26 日。
    // '2021-03-30', '2021/03/31' // 使用 datetimepicker 內設定時間格式，操作 "2021/03/30", "2021/03/31" 二天禁用，但瀏灠器會提示時間格式 RFC2822 錯誤。
  ],
});

$("#datetimepicker1").datetimepicker({

disabledDates: [

moment('2021/03/24', 'YYYY/MM/DD'), // 使用時間賴件 moment() 方法，指定 "2021/03/24" 日禁用。

new Date(2021, 2, 26), // 原生 JavaScript nee Date(年、月(0為一月)、日) 操作，禁用 2021/3/26 日。

// '2021-03-30', '2021/03/31' // 使用 datetimepicker 內設定時間格式，操作 "2021/03/30", "2021/03/31" 二天禁用，但瀏灠器會提示時間格式 RFC2822 錯誤。

});

See the Pen Tempus-Dominusbootstrap-日期時間選擇器-指定對象獨立設定禁選特定日期 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

input 顯示時間

在指定元素對象中，二種方式二選一，如果都沒設定的話預設是今天日期。
透過 defaultDate: "時間數值(2021-04-12)" 或是 moment.js 物件方式 moment('時間數值(2021/03/18)', '時間格式(YYYY/MM/DD)') 進行設定。

$("#datetimepicker1").datetimepicker({
  // defaultDate: "2021-04-12", // 使用方式一
  defaultDate: moment('2021/03/18', 'YYYY/MM/DD'), // 使用方式二
});

$("#datetimepicker1").datetimepicker({

// defaultDate: "2021-04-12", // 使用方式一

defaultDate: moment('2021/03/18', 'YYYY/MM/DD'), // 使用方式二

});

input 顯示時間(指定時間數值)

See the Pen Tempus-Dominusbootstrap-日期時間選擇器-input 顯示時間(指定時間數值) by Jimmy_Wu (@Jimmy_Wu) on CodePen.

input 顯示時間(moment.js 物件方式)

See the Pen Tempus-Dominusbootstrap-日期時間選擇器-input 顯示時間(moment.js 物件方式) by Jimmy_Wu (@Jimmy_Wu) on CodePen.

其他參考資料相關

moment.js

其他 Bootstrap 版本別相關日期選擇器

從零開始的 MVC 開發-使用 bootstrap 的 datetimepicker (Bootstrap 3 轉用的日期選擇器套件) 使用文章
Bootstrap 3 Datepicker v4 Docs (官方說明文件)
bootstrap-datepicker (Bootstrap 2 轉用的日期選擇器套件官方說明文件)

標籤雲

文章段落

Tempus-Dominusbootstrap-日期時間選擇器(bootstrap-4-datetimepicker)

安裝方式

npm

cdn

用於 Bootstrap 4 專案下的相關套件與賴件

使用與設定

bootstrap-4-datetimepicker 初始化基本使用

繁體中文化

時間格式設定

日期

時間格式

禁用時間

禁選週六日

指定對象獨立設定禁選特定日期

input 顯示時間

其他參考資料相關

moment.js

其他 Bootstrap 版本別相關日期選擇器

標籤雲

#ezw_tco-2 .ez-toc-title{ font-size: 120%; ; ; } #ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active{ background-color: #ededed; } 文章段落

安裝方式

npm

cdn

用於 Bootstrap 4 專案下的相關套件與賴件

使用與設定

bootstrap-4-datetimepicker 初始化基本使用

繁體中文化

時間格式設定

日期

時間格式

禁用時間

禁選週六日

指定對象獨立設定禁選特定日期

input 顯示時間

其他參考資料相關

moment.js

其他 Bootstrap 版本別相關日期選擇器

文章段落