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用在 ...
随机推荐
- 课题:如何培养自己的SEO资源
课题:如何培养自己的SEO资源 问:做SEO最重要的是什么?[针对性的流量]答:看获取一样东西的门槛.稀缺性,人人可得价值不大外链 内容 流量[正确]针对性的自然流量是用户自愿带来的,价值高,能形成购 ...
- DotNet二维码操作组件ThoughtWorks.QRCode
DotNet二维码操作组件ThoughtWorks.QRCode 在生活中有一种东西几乎已经快要成为我们的另一个电子"身份证",那就是二维码.无论是在软件开发的过程中,还是在普通用 ...
- android Camera 中添加一种场景模式
转自:http://blog.csdn.net/fulinwsuafcie/article/details/8833652 首先,来了解一下什么是场景模式. 最简单的方法当然是google了,这里有一 ...
- R树空间索引
R树在数据库等领域做出的功绩是非常显著的.它很好的解决了在高维空间搜索等问题.举个R树在现实领域中能够解决的例子吧:查找20英里以内所有的餐厅.如果没有R树你会怎么解决?一般情况下我们会把餐厅的坐标( ...
- 如何配置CentOS或者RedHat5.X、6.X、7.X的网络yum源
第一步:找到一个可靠的yum源 中科大帮助:https://lug.ustc.edu.cn/wiki/mirrors/help/centos源:http://mirrors.ustc.edu.cn/c ...
- CSS 实现加载动画之七-彩环旋转
今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...
- 20135202闫佳歆--week 8 课本第4章学习笔记
第四章 进程调度 一.多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统. 多任务操作系统使多个进程处于堵塞或者睡眠状态,实际不被投入执行,这些任务尽管位于内存,但是并不处于可运行状态. ...
- Linux 基础入门 第一周9.14~9.20
第一节 Linux系统简介 Linux——操作系统 1.使多个用户从不同的终端同时操作主机(分时操作系统): 2.MINIX是一个功能有限的类似于UNIX的操作系统(UNIX 实现了 TCP/IP 协 ...
- [工具类]DataTable与泛型集合List互转
写在前面 工作中经常遇到datatable与list,对于datatable而言操作起来不太方便.所以有的时候还是非常希望通过泛型集合来进行操作的.所以这里就封装了一个扩展类.也方便使用. 类 方法中 ...
- AJAX练习(一):制作可以自动校验的表单(从原理上分析ajax的作用)
继上文(AJAX(一)AJAX的简介和基础)作为联系. 传统网页在注册时检测用户名是否被占用,传统的校验显然缓慢笨拙. 当ajax出现后,这种体验有了很大的改观,因为在用户填写表单时,签名的表单项已经 ...