日期时间 独立的

日期时间是 DataTables 自己的日期时间选择器,我们主要在 编辑器搜索构建器 扩展中使用它,为用户提供一种选择日期和时间值的友好方式。如果您希望在其他一些场合或作为 DataTables 的自定义扩展的一部分使用它,它可以在 MIT 许可下免费获得。

除标准 JS 日期格式外,日期时间与 MomentLuxonDayjs 完全集成。

安装

有多种方法可在您的页面/项目中包括日期时间库。

浏览器

获取和使用日期时间的最简单方法是使用 DataTables 下载构建器,您可以在其中选择您希望在您的页面上使用的软件并为其创建一个并托管一个 Javascript 和 CSS 文件。在使用搜索构建器包和编辑器时,您需要确保在使用时包含这些内容。

或者,单个文件 可以包含在您的页面上,下载发行包源代码控制库克隆在 GitHub 上

NPM

日期时间库在 NPM 上可用,名称为 datatables.net-datetime。使用您的包管理器(例如 NPM、Yarn 或类似软件)来安装

npm install --save datatables.net-datetime

ES 模块

要在一个 ES 模块项目中使用库,只需导入它

import DateTime from 'datatables.net-datetime';

CommonJS

如果您的项目使用 CommonJS 加载器,那么就像 DataTables 核心及其其他扩展一样,DateTime 会导出一个函数,可以可选地传递 windowjQuery 对象,或者它会自动解析它们本身

const DateTime = require('datatables.net-datetime')();

// or
const DateTime = require('datatables.net-datetime')(window, jQuery);

初始化

如果您在页面上包含日期时间扩展,它将自动对该页面上的每个 DataTable 和扩展可用。使用日期时间的扩展会自己初始化它,因此不必担心它。当然,有可能在 DataTables 之外初始化日期时间实例。为此,只需创建一个新的日期时间实例,传入目标 input 元素。

new DateTime(document.getElementById('myInput'));

也可以通过 jQuery 初始化日期时间

$('#myInput').dtDateTime();

通过传入第二个参数(或如果使用 jQuery 样式初始化则为第一个参数)来设置配置选项,该对象包含要设置的所有选项。有 完整的文档 可供参考。

new DateTime(document.getElementById('test'), {
    locale: 'fr'
});

还有多种可用的 API 方法。它们 在此处记录,并附上它们用法的一个示例。

var dt = new DateTime(document.getElementById('example'));
dt.val("2021-12-31");

使用 Moment、Luxon 或 Dayjs 的唯一初始化需求是将它们包含在页面中。此操作将允许使用 ISO8601 以外的格式。可以使用这些库的示例,请参见此处:MomentLuxonDayjs

功能

DateTime 添加了以下功能

  • 轻松选择日期和时间
  • 完全自定义日期格式
  • 完全自定义地区
  • 完全可实现国际化