在表单中使用
此示例显示了在 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( 'Making an appointment for ' + name + ' (' + phone + ') on ' + date + ' at ' + 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( 'Making an appointment for ' + name + ' (' + phone + ') on ' + date + ' at ' + time ); });
除了以上代码外，还加载了以下 Javascript 库文件以用于此示例
下面显示的 HTML 是原始 HTML 表格元素，在经过 DataTables 增强之前
此示例使用了一些额外的 CSS，除了从库文件中加载的 CSS（如下所示），以便正确显示表格。使用的附加 CSS 如下所示
加载了以下 CSS 库文件以用于此示例，用于提供表格样式
此表格通过 Ajax 加载数据。以下显示最新的已加载数据。这些数据将随着加载任何附加数据而自动更新。
下面显示了用于对此表格执行服务器端处理的脚本。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用DataTables 文档中描述的协议。