jQueryEasyUI DateBox的基本使用
http://www.cnblogs.com/libingql/archive/2011/09/25/2189977.html
1、基本用法
代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>日期控件</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtDate").datebox();
});
</script>
</head>
<body>
<input id="txtDate" type="text" />
</body>
</html>
或
1
2
3
4
5
6
7
8
9
10
11 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">
<title>日期控件</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
<input id="txtDate" type="text" class="easyui-datebox" />
</body>
</html>
效果图：
2、显示时间
代码：
1
2
3
4
5 <script type="text/javascript">
$(function () {
$("#txtDate").datetimebox();
});
</script>
或
1 <input id="txtDate" type="text" class="easyui-datetimebox" />
效果图：
3、本地化
代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>日期控件</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtDate").datebox();
});
</script>
</head>
<body>
<input id="txtDate" type="text" />
</body>
</html>
效果图：
4、属性设置
代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>日期控件</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtDate").datebox({
required: "true",
missingMessage: "必填项",
formatter: function (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) + "日";
}
});
});
</script>
</head>
<body>
<input id="txtDate" type="text" />
</body>
</html>
或
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 <script type="text/javascript">
$(function () {
var options = {
required: "true",
missingMessage: "必填项",
formatter: function (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) + "日";
}
}
$("#txtDate").datebox(options);
});
</script>
效果图：
5、启用/禁用
代码：
1
2
3
4
5
6
7 <script type="text/javascript">
$(function () {
$("#txtDate").datebox({
disabled: true
});
});
</script>
6、参数
|
属性名 |
类型 |
描述 |
默认值 |
|
currentText |
字符串 |
为当前日期按钮显示的文本 |
Today |
|
closeText |
字符串 |
关闭按钮显示的文本 |
Close |
|
disabled |
布尔 |
如果为true则禁用输入框 |
false |
|
required |
布尔 |
定义输入框是否为必添 |
false |
|
missingMessage |
字符串 |
当输入框为空时提示的文本 |
必填 |
|
formatter |
function |
格式化日期的函数，这个函数以’date’为参数，并且返回一个字符串 |
—— |
|
parser |
function |
分析字符串的函数，这个函数以’date’为参数并返回一个日期 |
—— |
7、事件
|
事件名 |
参数 |
描述 |
|
|
onSelect |
date |
当选择一个日期时触发 |
jQueryEasyUI DateBox的基本使用的更多相关文章
- jQueryEasyUI
jQueryEasyUI 编辑 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者 ...
- 在Asp.Net中使用jQueryEasyUI(转)
最近做一个小工具,列表显示页面准备使用jQuery的UI框架,因为之前知道有jQWidgets这个框架,所以直接就下载下来使用了,jQWidgets的功能很强大,Demo和文档也非常详细,但使用后发现 ...
- 轻量级的日期插件--datebox
jquery的日期插件有好几款,H5中的input也可以自带日期选择.但为什么要再写一个,有两个理由,一个是引用的文件太大,而有时候只需要很简单的功能,二个是想加一些自定义的效果不好改. 我写的这个功 ...
- 关于JqueryEasyUI集合Kindeditor
写在前面 上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...
- jquery-easyui 树的使用笔记
通常还是使用jquery-ui, 它是完全免费的, jquery-easyui可以使用 freeware edition. 但easyui还不是完全免费的: 它是基于jquery, 但是第三方开发的, ...
- easyui datebox 扩展清空按钮及日期判断
<input id="EndHavDate" class="easyui-datebox" data-options="prompt:'请选择结 ...
- easyui datebox 设置不可编辑
easyui datebox不允许编辑可以输入 editable="false"<input class="easyui-datebox" editabl ...
- Easyui datebox 限制时间选择范围
Require Date: <input class="easyui-datebox" data-options="formatter:myformatter,pa ...
- JQuery-EasyUI与EXTjs有什么区别？
一.ExtJS1.ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.因此,可以把ExtJS用在 ...
随机推荐
- Android中Intent传值与Bundle传值的区别详解
Android中Intent传值与Bundle传值的区别详解 举个例子我现在要从A界面跳转到B界面或者C界面 这样的话 我就需要写2个Intent如果你还要涉及的传值的话 你的Intent就要写两 ...
- 02SpringMvc_springmvc快速入门小案例（XML版本）
这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:
- MVC ajaxSubmit上传图片
注意事项: 1.提交form,必须引用jquery.form.min.js 2.不要使用mvc自带的Ajax.Form() 1.页面cshtml <form name="frmInpu ...
- AVR/Arduino定时/计数器、中断入门
在Arduino中,可以使用AnalogWrite来使用硬件产生490Hz/980Hz的pwm波,并可根据参数来设定占空比.不了解这个的同学可以去AnalogWrite学习下,SecretsOfArd ...
- jade 渲染js片段
script. str = !{JSON.stringify(val)}; res.render('wxpay', {val:result});
- Elasticsearch 相关名词理解
Cluster包含多个node,Indices不应该理解成动词索引,Indices可理解成关系数据库中的databases,Indices可包含多个Index,Index对应关系数据库中的databa ...
- C语言 位运算
1G=1024M; 1M=102KB; 1KB=1024B(字节); 1B=8bits(位); #include<stdio.h> #include<stdlib.h> //C ...
- 多个github帐号的SSH key切换
写在前面的话 github账号,工作有一个,自己有一个.但是默认下使用ssh key在git push时只有默认账号能免输入账号和密码. 如果想让另一个账号在代码push时免账号和密码,请看这篇文章h ...
- scrapy 代理
说明: 本文参照了官网文档,以及stackoverflow的几个问题 概要: 在scrapy中使用代理,有两种使用方式 使用中间件 直接设置Request类的meta参数 方式一:使用中间件 要进行下 ...
- 抓包工具charles的使用
Charles是一款抓包修改工具,数据请求控制容易,操作简单. 下载和安装 首先是工具下载和安装 安装前需要先有Java的运行环境.下载到charles的破解版以后,正常安装.一般破解版里会有char ...