文档章节

3.EASYUI DateBox 组件

F
 Favour
发布于 2016/08/14 15:44
字数 756
阅读 6
收藏 0
点赞 0
评论 0

1. 基本日期框组件 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Basic DateBox - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>基本日期框组件</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>点击右边日历小图标.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<input class="easyui-datebox"></input>
</body>
</html>

2. 日期格式化 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Date Format - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>日期格式化</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>用不同的格式格式化不同的日期框组件.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<input class="easyui-datebox"></input>
	<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>
	<script type="text/javascript">
		function myformatter(date){
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			return y+'/'+(m<10?('0'+m):m)+'/'+(d<10?('0'+d):d);
		}
		function myparser(s){
			if (!s) return new Date();
			var ss = (s.split('/'));
			var y = parseInt(ss[0],10);
			var m = parseInt(ss[1],10);
			var d = parseInt(ss[2],10);
			if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
				return new Date(y,m-1,d);
			} else {
				return new Date();
			}
		}
	</script>
</body>
</html>

3. 日期框验证

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Date Format - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>日期框验证</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>日期框验证不能为空.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<input class="easyui-datebox" required></input>
</body>
</html>

4. 日期框事件

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Date Format - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>日期框事件</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>点击右边日历小图标.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<input class="easyui-datebox" data-options="onSelect:onSelect"></input>
	<div style="margin:10px 0">
		<span>选择的日期是: </span>
		<span id="result"></span>
	</div>
	<script>
		function onSelect(date){
			$('#result').text(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
		}
	</script>
</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 185
码字总数 96673
作品 0
成都
程序员
JQuery类选择器的问题,求助!!!

目前项目中的日历组件的class属性是以datebox开头的,什么dateboxshort1/2/3..., dateboxlong1/2/3...,感觉这样特别麻烦。 我想做一个自定义的长度的日历组件,比如:class=“datebox120”,...

Trc ⋅ 2016/04/11 ⋅ 2

.NET EasyUI datebox添加清空功能

  前言,前段时间的项目使用EasyUI框架搭建,使用了其自带的一系列组件。但对于datebox,其功能别的不多说,令人蛋疼的是它居然没有清空功能,这让在搜索区域中摆了日期条件的咋整啊,没办...

我是骗子 ⋅ 2016/05/19 ⋅ 0

easyui的datebox组件,手动删除input里面的时间,提交后表单怎还是之前的数据?

表单里面的查询,用的是easy的datebox组件,查询的时候选择了一个日期。进行了查询操作后,后台把查询的日期数据再次返回到页面。 下一次查询,我想去掉这个日期,不需要日期参数,手动删除文...

forai ⋅ 2015/05/20 ⋅ 4

jQuery EasyUI 1.4.1 发布

jQuery EasyUI 1.4.1 发布了,下载地址: http://www.jeasyui.com/download/index.php ChangeLog(更新日志) Bug(错误) The combogrid has different height than other combo components......

ejzhang ⋅ 2014/11/06 ⋅ 31

spring使用jquery的datebox

每次很害怕使用jquery的datebox,因为datebox有个默认值为null,所以使用required属性对datebox没用,因此,每次遇到datebox时我都会从后台传date值给它,就可以判断是否为空了,例如 <input...

wenwen1 ⋅ 2013/08/30 ⋅ 0

日期控件使用

在设置日期的相关函数操作时,如果JQUERY版本或EASY-UI的版本引用不正确,往往可能导致相关函数操作错误。 1. html代码: --

andrewniu ⋅ 2017/11/15 ⋅ 0

鼠标离开文本框,请求执行了三次,应该只执行一次才对

validatebox 的validType属性 页面代码如下: data-options="required:true,validType:['minLength[1]','maxLength[45]','checkUserId']" js代码如下: $.extend($.fn.validatebox.defaults......

javacc ⋅ 2015/10/22 ⋅ 6

easyUI——datebox验证和自定义取消按钮

来源:http://blog.csdn.net/liusong0605/article/details/42270463 1. datebox验证 验证结束时间 结束时间:

imzdx ⋅ 2015/12/12 ⋅ 0

jQuery EasyUI 表单插件 - Datebox 日期框

扩展自 $.fn.combo.defaults。通过 $.fn.datebox.defaults 重写默认的 defaults。 日期框(datebox)把可编辑的文本框和下拉日历面板结合起来,用户可以从下拉日历面板中选择日期。在文本框中...

易水寒丶开源 ⋅ 2015/11/05 ⋅ 0

EasyUI 控件禁用方法

EasyUI常用控件禁用方法: 1.validatebox可以用的用法:前两种适用于单个的validatebox; 第三种应用于整个form里面的输入框; <1>.$("#id").attr("readonly", true); ----- $("#id").removeAtt...

HJCui ⋅ 2016/07/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vue-cli是什么?

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,分为vue init webpack-simple 项目名 和vue init webpack 项目名 两种。 当然首先你的安装vue,webpack...

韦姣敏 ⋅ 35分钟前 ⋅ 0

12c rman中输入sql命令

12c之前版本,要在rman中执行sql语句,必须使用sql "alter system switch logfile"; 而在12c版本中,可以支持大量的sql语句了: 比如: C:\Users\zhengquan>rman target / 恢复管理器: Release 1...

tututu_jiang ⋅ 41分钟前 ⋅ 0

java 线程池

概述 减少了创建和销毁线程的次数,每个工作线程都可以被重复利用,可执行多个任务 可以根据系统的承受能力,调整线程池中工作线线程的数目,防止因为因为消耗过多的内存,而把服务器累趴下(...

轨迹_ ⋅ 46分钟前 ⋅ 0

Nginx的https配置记录以及http强制跳转到https的方法梳理

Nginx的https配置记录以及http强制跳转到https的方法梳理 一、Nginx安装(略) 安装的时候需要注意加上 --with-httpsslmodule,因为httpsslmodule不属于Nginx的基本模块。 Nginx安装方法: ...

Yomut ⋅ 57分钟前 ⋅ 0

SpringCloud Feign 传递复杂参数对象需要注意的地方

1.传递复杂参数对象需要用Post,另外需要注意,Feign不支持使用GetMapping 和PostMapping @RequestMapping(value="user/save",method=RequestMethod.POST) 2.在传递的过程中,复杂对象使用...

@林文龙 ⋅ 59分钟前 ⋅ 0

如何显示 word 左侧目录大纲

打开word说明文档,如下图,我们发现左侧根本就没有目录,给我们带来很大的阅读障碍 2 在word文档的头部菜单栏中,切换到”视图“选项卡 3 然后勾选“导航窗格”选项 4 我们会惊奇的发现左侧...

二营长意大利炮 ⋅ 今天 ⋅ 0

智能合约编程语言Solidity之线上开发工具

工具地址:https://ethereum.github.io/browser-solidity/ 实例实验: 1.创建hello.sol文件 2.调试输出结果

硅谷课堂 ⋅ 今天 ⋅ 0

ffmpeg 视频格式转换

转 Mp4 格式 #> ffmpeg -i input.avi -c:v libx264 output.mp4#> ffmpeg -i input.avi -c:v libx264 -strict -2 output.mp4#> ffmpeg -i input.avi -c:v libx264 -strict -2 -s 1......

Contac ⋅ 今天 ⋅ 0

VCS仿真生成vpd文件(verilog)

VCS仿真生成vpd文件(verilog): https://www.cnblogs.com/OneFri/p/5987673.html SYNOPSYS VCS常用命令使用详解 https://blog.csdn.net/hemmingway/article/details/49382551 DVE是synopsys公......

whoisliang ⋅ 今天 ⋅ 0

Spring Boot启动配置原理

几个重要的事件回调机制 配置在META-INF/spring.factories ApplicationContextInitializer SpringApplicationRunListener 只需要放在ioc容器中 ApplicationRunner CommandLineRunner 启动流程......

小致dad ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部