EasyUI之日期输入框dateBox

来源：互联网发布：桌面图标软件编辑：程序博客网时间：2024/06/09 18:47

1.样式

日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。

2.练习1：使用标签创建日期输入框

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>dateBox</title><link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link><link rel="stylesheet" href="themes/icon.css" type="text/css"></link><!-- 引入js文件 --><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script><script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script></head><body>时间：<input id="dd" type="text" class="easyui-datebox" required="required"/> </body></html>

结果：

3.练习2：使用js创建日期输入框

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>dateBox</title><link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link><link rel="stylesheet" href="themes/icon.css" type="text/css"></link><!-- 引入js文件 --><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script><script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script></head><body>时间：<input id="timeID" type="text"/></body><script type="text/javascript">$("#timeID").datebox({required:true});</script></html>

结果：

4.文档

0 0