Easyui之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>  
&