DateBox初步介绍
前言
今天为大家分享的知识点是DateBox组件，博主自主学习之后决定分享给你们啦，感兴趣的小伙伴们搬好小板凳啦~
案例演示
根据之前学过的easyui中的Tree组件、Tabs选项卡、datagrid组件以来，发现使用这些组件大部分的共同点就是通过以下两种方式实现：
当然，不管怎样实现，还是得经过这些流程：
1、新建一个动态的web项目，也就是Dynamic Web Project !
2、在webcontent下新建一个static的静态资源文件夹，所谓静态资源，就是固定不会改变的东西！
静态资源文件中通常包含js、css、以及images！
3、将相关的easyui的js文件导入到static下的js文件夹
然后下面就是这两种方式的具体实现过程啦！
1、静态html实现
接着上面必不可少的三步来，
首先了解一下DateBox的最终实现效果，以结果为导向，目标会更加明确~
这张是正常显示结果：
这张是点击右边的日历图标进行开始日期的选择~
这张是点击右边的日历图标进行结束日期的选择~
这张是进行了开始日期和结束日期的选择~
当然和动态js最终加载出数据的也是一样的啦~
上代码，首先找到和datebox中demo下的basic.html文件，直接复制以下这段代码就欧克~
首先在webcontent下面新建一个index.jsp文件：
其次记得导入全局样式、图片样式、以及定义图标的样式…导入的时候注意先后顺序，别搞错了~
全局样式、图片样式、以及定义图标的样式，注意这个是放在meta标签下~
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
其中${pageContext.request.contextPath }是获取绝对路径！
jsp页面：
<h2>Basic DateBox</h2>
<p>Click the calendar image on the right side.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-datebox" label="Start Date:" labelPosition="top" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-datebox" label="End Date:" labelPosition="top" style="width:100%;">
</div>
</div>
最终呈现效果如上文~
2、js动态加载数据实现
这个时候讲完静态的html之后，就可以开始玩的js方式动态加载数据啦~
jsp页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/date.js"></script>
<title>主页面</title>
</head>
<body>
<h2>Basic DateBox</h2>
<p>Click the calendar image on the right side.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
开始日期:<input id="dd" type= "text" class= "easyui-datebox" required ="required" height="200px" ></input>
</div>
<div style="margin-bottom:20px">
结束日期:<input id="da" type= "text" class= "easyui-datebox" required ="required" height="200px" ></input>
</div>
</div>
</body>
</html>
注意，date.js文件一定要记得在jsp页面引用，不要光写date.js而不引用！
当然，该jsp文件中用到的主要代码是这两行：
1、使用标签创建日期输入框：
<input id="dd" type= "text" class= "easyui-datebox" required ="required"> </input>
<input id="da" type= "text" class= "easyui-datebox" required ="required"> </input>
只是为了最终的实现效果会更加好看一点，在input标签外增加了div容器以及换行标签，进行设置两个input标签的上下间距~
2、使用Javascript创建日期输入框：
$(function() {
$('#dd').datebox({
required:true
});
$('#da').datebox({
required:true
});
})
注意在创建日期输入框时，利用到了required属性，所以在进行时间选择的时候，会提示你这是个必填项！
运行结果：
正常结果展示：
在点击了右边的日历图片后，就可以进行日期时间的选择啦~
在点击了开始日期文本框后的日历图标时：
在点击了结束日期文本框后的日历图标时：
最终得到结果：
总结
今天为大家分享的datebox日期输入框组件还算比较简单，博主自主学习的，有时间后续为大家分享，内容就到这里啦，不足之处欢迎指正，欢迎留言哦，拜拜~