EasyUI的jQuery时间选取器小部件

EasyUI是一个用于Web应用程序开发的jQuery插件集合，它包含了一系列易于使用的UI组件，其中包括了时间选取器小部件。下面是EasyUI jQuery时间选取器小部件的完整攻略：

1. 引入EasyUI相关文件

在html中引入EasyUI相关js和css文件：

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

2. 创建时间选取器小部件

通过下面的代码创建EasyUI的jQuery时间选取器小部件：

<input class="easyui-datetimebox" name="dt" editable="false">

其中，easyui-datetimebox 表示控件类型为 EasyUI 的日期时间控件，name 属性是表单控件名称，editable 属性设置为 false 表示不能手动输入。

3. 配置控件属性

我们可以通过 EasyUI 的 options 属性配置控件的属性，如 editable: false，width: 200，height: 30，required: true 等。

<input class="easyui-datetimebox" name="dt" editable="false" required="true" options="width:200,height:30,editable:false">

4. 设置默认值

我们可以在控件上设置默认值，如下所示：

<input class="easyui-datetimebox" name="dt" editable="false" value="2022-01-01 00:00:00">

5. 获取时间选取器的值

我们可以通过 EasyUI 的 getValue() 方法获取时间选取器的值。以下代码展示了获取时间选取器的值并输出到控制台的示例：

var dt = $('input[name="dt"]').datetimebox('getValue');
console.log(dt);

示例1：动态设置时间选取器的值

以下代码展示了动态设置时间选取器的值的示例：

<button onclick="setDateTime()">设置日期为当前日期</button>
<input class="easyui-datetimebox" name="dt" editable="false">

<script type="text/javascript">
    function setDateTime() {
        $('input[name="dt"]').datetimebox('setValue', new Date());
    }
</script>

点击按钮后，时间选取器中的时间将被设置为当前时间。

示例2：禁用时间选取器

以下代码展示了如何禁用 EasyUI 的时间选取器小部件：

<button onclick="disableDateTime()">禁用日期选择</button>
<input class="easyui-datetimebox" name="dt" editable="false">

<script type="text/javascript">
    function disableDateTime() {
        $('input[name="dt"]').datetimebox('disable');
    }
</script>

点击按钮后，时间选取器将会被禁用，无法进行选择。