📌  相关文章
📜  jQWidgets jqxDateTimeInput 完整参考(1)

📅  最后修改于: 2023-12-03 14:43:22.081000             🧑  作者: Mango

jQWidgets jqxDateTimeInput 完整参考

jQWidgets jqxDateTimeInput 是一个日期时间输入控件，它可以让用户选择日期和时间，支持多种日期时间格式，并可以进行自定义。

特性
  • 支持多种日期时间格式，包括：ISO 8601、UTC、本地时间、时间戳等；
  • 支持自定义日期时间格式；
  • 可以设置日期时间的范围；
  • 支持本地化，可以显示不同语言的日期时间格式；
  • 支持键盘操作。
安装方式

jQWidgets jqxDateTimeInput 可以通过以下方式安装：

npm
npm install jqwidgets-framework
下载

从官方网站下载 jQWidgets jqxDateTimeInput 的压缩包。

基本用法
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jqxDateTimeInput</title>
    <!-- 引入 jqxwidgets 样式文件 -->
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css">
    <!-- 引入 jqxwidgets 脚本文件 -->
    <script src="jqwidgets/jqxcore.js"></script>
    <script src="jqwidgets/jqxdatetimeinput.js"></script>
</head>
<body>
    <div id="dateTimeInput"></div>

    <script>
        // 初始化 jqxDateTimeInput 控件
        $("#dateTimeInput").jqxDateTimeInput({});
    </script>
</body>
</html>
API参考

以下是 jQWidgets jqxDateTimeInput 的常用API，请参考。

创建

jqxDateTimeInput(options)

创建 jqxDateTimeInput 控件。

参数说明：

  • options (Object)：可选，配置项对象。

返回值：

jqxDateTimeInput 对象实例。

选项

以下是 jqxDateTimeInput 控件的可配置选项。

allowEditDate (Boolean)

允许编辑日期部分。

allowEditTime (Boolean)

允许编辑时间部分。

allowNullDate (Boolean)

允许空日期。如果设置为 true，在没有选中日期之前，日期文本框将没有任何内容。

allowNullTime (Boolean)

允许空时间。如果设置为 true，在没有选中时间之前，时间文本框将没有任何内容。

autoClose (Boolean)

自动关闭日期时间选择器。

culture (String)

设置控件的语言环境。

dateTimeFormat (String)

设置日期时间格式字符串。

dropDownHorizontalAlignment (String)

设置日期时间选择器的水平对齐方式。

dropDownVerticalAlignment (String)

设置日期时间选择器的垂直对齐方式。

enableBrowserBoundsDetection (Boolean)

是否使用浏览器边界检测。

firstDayOfWeek (Number/String)

设置每周的第一天。可以输入 0~6 或者 "su"、"mo"、"tu"、"we"、"th"、"fr"、"sa"。

formatString (String)

日期时间格式化字符串。

height (Number/String)

控件高度。

max (Date)

日期时间范围的最大值。

min (Date)

日期时间范围的最小值。

popupZIndex (Number)

设置日期时间选择器的 z-index 值。

rtl (Boolean)

是否启用从右到左的布局。

showCalendarButton (Boolean)

是否显示日历按钮。

showFooter (Boolean)

是否显示日期时间选择器的页脚。

showWeekNumbers (Boolean)

是否显示周编号。

theme (String)

设置控件的主题。

todayString (String)

今天的按钮的文本内容。

value (Date)

日期时间的值。

width (Number/String)

控件宽度。

方法

以下是 jqxDateTimeInput 控件的常用方法。

destroy()

销毁控件。

focus()

使控件获得焦点。

getDateTime()

获取日期时间。

setDateTime(date)

设置日期时间。

参数说明：

  • date (Date)：要设置的日期时间。
事件

以下是 jqxDateTimeInput 控件的常用事件。

change (event)

当日期时间发生变化时触发。

close (event)

当日期时间选择器关闭时触发。

open (event)

当日期时间选择器打开时触发。

总结

jQWidgets jqxDateTimeInput 是一个功能强大的日期时间输入控件，拥有丰富的可配置选项和常用 API。开发者可以根据自己的需要，灵活地配置和使用此控件。