EasyUI之日期输入框dateBox

最新推荐文章于 2023-10-12 11:27:02 发布

sunpy 孙培煜

最新推荐文章于 2023-10-12 11:27:02 发布

阅读量1.6k

点赞数 1

分类专栏： __2.4 EasyUI 文章标签：日历 easyui

本文链接：https://blog.csdn.net/ya_1249463314/article/details/69933963

版权

__2.4 EasyUI 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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.文档

sunpy 孙培煜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI之日期输入框dateBox

1.样式日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。2.练习1：使用标签创建日期输入框dateBox 时间：结果：3.练习2：使用js创建日期输入框dateBox
复制链接

扫一扫

专栏目录