jQWidgets jqxDateTimeInput valueChanged 事件(1)

📌 相关文章

📜 jQWidgets jqxDateTimeInput valueChanged 事件(1)

📅 最后修改于: 2023-12-03 15:16:53.422000 🧑 作者: Mango

jQWidgets jqxDateTimeInput valueChanged 事件

jQWidgets是一个基于Javascript的UI框架，其中jqxDateTimeInput是其提供的一个日期时间选择控件。valueChanged事件可以在用户修改日期时间时触发，通过该事件可以实现对用户输入的实时响应。

代码示例

在HTML文件头部添加以下代码：

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

在HTML文件中创建一个jqxDateTimeInput控件：

<div id="datetimeInput"></div>

在Javascript文件中添加以下代码：

$("#datetimeInput").jqxDateTimeInput({ 
    width: '300px', 
    height: '35px', 
    formatString: 'yyyy-MM-dd hh:mm:ss', 
    showTimeButton: true 
});

$("#datetimeInput").on('valueChanged', function (event) {
    var date = event.args.date;
    // 在此处添加对用户输入的响应操作
});

参数说明

formatString

格式化日期时间的字符串。该参数为可选参数，默认值为"yyyy-MM-dd hh:mm:ss"。

showTimeButton

是否显示时间按钮。该参数为可选参数，默认值为true。

valueChanged事件参数

event

事件对象。

args.date

用户选择的日期时间，为Date类型。

使用场景

valueChanged事件可以在用户修改日期时间时实现对用户输入的实时响应，比如在某个时间节点之前或之后禁止用户选择该时间段，或者根据用户选择的时间展示不同的数据。

参考链接

jqxDateTimeInput官方文档

Markdown代码

# jQWidgets jqxDateTimeInput valueChanged 事件

jQWidgets是一个基于Javascript的UI框架，其中jqxDateTimeInput是其提供的一个日期时间选择控件。valueChanged事件可以在用户修改日期时间时触发，通过该事件可以实现对用户输入的实时响应。

## 代码示例

在HTML文件头部添加以下代码：

```html
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

在HTML文件中创建一个jqxDateTimeInput控件：

<div id="datetimeInput"></div>

在Javascript文件中添加以下代码：

$("#datetimeInput").jqxDateTimeInput({ 
    width: '300px', 
    height: '35px', 
    formatString: 'yyyy-MM-dd hh:mm:ss', 
    showTimeButton: true 
});

$("#datetimeInput").on('valueChanged', function (event) {
    var date = event.args.date;
    // 在此处添加对用户输入的响应操作
});

参数说明

formatString

格式化日期时间的字符串。该参数为可选参数，默认值为"yyyy-MM-dd hh:mm:ss"。