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用在 ...
随机推荐
- FMDB 使用方法
优秀的第三方库,README 也是很优秀的,理解了 README,会对使用带来很多便利. ARC 和 MRC 项目中使用 ARC 还是 MRC,对使用 FMDB 都没有任何影响,FMDB 会在编译项目 ...
- SQL 常见函数使用
1.字符串转化为整型 CONVERT(INT,'字符串') 2.结果集 输出为一段字符串 SELECT STUFF((SELECT ','+A FROM tableFOR XML PATH('')), ...
- [转]Nginx+ThinkPHP不支持PathInfo的解决办法
FROM : http://www.4wei.cn/archives/1001174 应集团要求,公司的服务器全收到集团机房统一管理了,失去了服务器的管理配置权限. 杯具就此开始. 首先要解决文件大小 ...
- Linux Linux程序练习七
题目:实现两个程序mysignal.mycontrl,mycontrl给mysignal发送SIGINT信号,控制mysignal是否在屏幕打印“hello”字符串. //捕捉信号 #include ...
- JNI 程序开发
参考资料: http://blog.csdn.net/wwj_748/article/details/28136061 JNI_最简单的Java调用C/C++代码 http://blog.csdn.n ...
- Android 动画之TranslateAnimation应用详解
TranslateAnimation比较常用,比如QQ,网易新闻菜单条的动画,就可以用TranslateAnimation实现, 通过TranslateAnimation(float fromXDel ...
- Tomcat6 一些调优设置内存和连接数
Tomcat6 一些调优设置内存和连接数 博客分类: java TomcatJVMLinux应用服务器网络应用 公司的一个服务器使用Tomcat6默认配置,在后台一阵全点击服务器就报废了,查了一下就 ...
- 一个Eclipse代码显示主题
- [CareerCup] 13.10 Allocate a 2D Array 分配一个二维数组
13.10 Write a function in C called my2DAlloc which allocates a two-dimensional array. Minimize the n ...
- Jmeter测试webocket协议
Jmeter本身不支持websocket协议的,所以需要安装第三方的插件还有6个依赖包. 首先,我们需要准备Jmeter的WebSocket协议的支持插件: JMeterWebSocketSample ...