easyUI的时间控件[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

以前没怎么用过easyUI，今天用到时间控件，又了解到了一点东西：在页面中通过js添加控件，需要主动渲染。 时间控件的样式

 <input class="easyui-datetimebox" id="starttime" name="starttime" style="width:150px" />

然后通过js 动态的添加的时候，使用append添加

container.append('开始时间< input class="easyui-datetimebox" id="starttime" name="starttime" style="width:150px" />');

在页面只是一个文本框，右侧不显示选择时间的小按钮，控件不能加载 查询的得知，easyUI属性的加载是在渲染页面的时候完成，当页面渲染完成之后，通过js动态调用再添加的easyUI的控件就不再起效果，需要手动的进行加载，于是添加：

$.parser.parse(container);

这样就可以将新添加了easyui-datetimebox属性加载到页面

但是在获取数据的时候又出现问题，通过id无法获取值，通过调试得到，时间控件会生成一个隐藏域，里面是选择的时间，但是这个隐藏域里没有id属性，但是有name属性，于是使用name可以获取值

$("input[name='starttime']").val()

于是通过：

container.append('开始时间<input class="easyui-datetimebox" id="starttime" name="starttime" style="width:150px" />');
container.append('结束时间<input class="easyui-datetimebox" id="endtime" name="endtime" style="width:150px" />');
$.parser.parse(container);

效果如下：

选择时间

查看具体的值存放：

这里写图片描述

可以看到，选择的时间“2017-12-26 13:45:03”没有显示在自己定义的input标签里，而是在easyUI自己生产的一个隐藏域里面。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/142662.html原文链接：https://javaforall.cn