欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Easyui之DateBox日期输入框

程序员文章站 2022-07-04 16:00:50
...

DateBox初步介绍

前言

今天为大家分享的知识点是DateBox组件，博主自主学习之后决定分享给你们啦，感兴趣的小伙伴们搬好小板凳啦~

案例演示

根据之前学过的easyui中的Tree组件、Tabs选项卡、datagrid组件以来，发现使用这些组件大部分的共同点就是通过以下两种方式实现：

当然，不管怎样实现，还是得经过这些流程：

1、新建一个动态的web项目，也就是Dynamic Web Project !

Easyui之DateBox日期输入框
2、在webcontent下新建一个static的静态资源文件夹，所谓静态资源，就是固定不会改变的东西！

Easyui之DateBox日期输入框
静态资源文件中通常包含js、css、以及images！

3、将相关的easyui的js文件导入到static下的js文件夹

然后下面就是这两种方式的具体实现过程啦！

1、静态html实现

接着上面必不可少的三步来，

首先了解一下DateBox的最终实现效果，以结果为导向，目标会更加明确~

这张是正常显示结果：

Easyui之DateBox日期输入框
这张是点击右边的日历图标进行开始日期的选择~

Easyui之DateBox日期输入框
这张是点击右边的日历图标进行结束日期的选择~

Easyui之DateBox日期输入框
这张是进行了开始日期和结束日期的选择~
Easyui之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属性，所以在进行时间选择的时候，会提示你这是个必填项！

运行结果：

正常结果展示：

Easyui之DateBox日期输入框
在点击了右边的日历图片后，就可以进行日期时间的选择啦~
Easyui之DateBox日期输入框
在点击了开始日期文本框后的日历图标时：

Easyui之DateBox日期输入框
在点击了结束日期文本框后的日历图标时：

Easyui之DateBox日期输入框
最终得到结果：

Easyui之DateBox日期输入框

总结

今天为大家分享的datebox日期输入框组件还算比较简单，博主自主学习的，有时间后续为大家分享，内容就到这里啦，不足之处欢迎指正，欢迎留言哦，拜拜~Easyui之DateBox日期输入框

相关标签： easyui DateBox日期输入框

上一篇： SpringCloud系列九：SpringCloudConfig 基础配置（SpringCloudConfig 的基本概念、配置 SpringCloudConfig 服务端、抓取配置文件信息、客户端使

下一篇： Semantic UI 之 输入框

推荐阅读