在表單中使用
此範例展示了如何在 Bootstrap 4 樣式的表單中使用 DateTime 選擇器。日期和時間已被分成不同的欄位來示範其功能，但如果需要，也可以合併為單一欄位。
在此範例中，表單提交將僅顯示包含表單資訊的警告訊息。
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
new DateTime('#inputDate', { format: 'MMMM Do YYYY' }); new DateTime('#inputTime', { format: 'h:mm a' }); $('#appointment').on('submit', function (e) { e.preventDefault(); var name = $('#inputName').val(); var phone = $('#inputPhone').val(); var date = $('#inputDate').val(); var time = $('#inputTime').val(); alert( '為 ' + name + ' (' + phone + ') 預約在 ' + date + ' 的 ' + time ); });
new DateTime('#inputDate', { format: 'MMMM Do YYYY' }); new DateTime('#inputTime', { format: 'h:mm a' }); document.querySelector('#appointment').addEventListener('submit', function (e) { e.preventDefault(); let name = document.querySelector('#inputName').value; let phone = document.querySelector('#inputPhone').value; let date = document.querySelector('#inputDate').value; let time = document.querySelector('#inputTime').value; alert( '為 ' + name + ' (' + phone + ') 預約在 ' + date + ' 的 ' + time ); });
除了以上程式碼外，還載入了以下 Javascript 函式庫檔案以在此範例中使用
以下顯示的 HTML 是原始的 HTML 表格元素，在被 DataTables 增強之前
此範例使用了一些額外的 CSS，除了從函式庫檔案載入的 CSS（如下所示），以便正確顯示表格。額外使用的 CSS 如下所示
為了提供表格的樣式，在此範例中載入了以下 CSS 函式庫檔案
此表格透過 Ajax 載入資料。以下顯示的是已載入的最新資料。當載入任何其他資料時，此資料將自動更新。
以下顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。