转:http://www.cnblogs.com/libingql/archive/2011/09/25/2189977.html
1、基本用法
代码:
<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>
或:
<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、显示时间
代码:
<script type="text/javascript">
$(function () {
$("#txtDate").datetimebox();
});
</script>
或
<input id="txtDate" type="text" class="easyui-datetimebox" />
效果图:
3、本地化
代码:
<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、属性设置
代码:
<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><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>
</head>
<body>
<input id="txtDate" type="text" />
</body>
</html>
或
<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、启用/禁用
代码:
<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
|
当选择一个日期时触发
|
|
分享到:
相关推荐
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
基于jquery easyui改造的周选择控件 可指定周起始星期,默认周日为本周的第一天
最近我在做一个安全监测系统,选择了用easyui进行搭建,easyui是一种基于jQuery的用户界面插件集合。使用easyui可以省去很多代码,功能上需要加一些样式。下面小编给大家介绍下给Easyui-Datebox设置隐藏或者不可用的...
easyui的datebox组件,两个datebox,一个开始时间,一个结束时间,这两个时间间隔最大一个月,也就是说在选定了开始时间后,相应的结束时间有一部分要变成灰色的不可用
主要介绍了easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码,需要的朋友参考下吧
解决easyui-datebox日期格式,只需引入此包即可,不需改源码
本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档(完整)目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...
jQuery EasyUI 1.3.5版本更新内容: Bug(修复) searchbox:修复“searcher”函数提供的“name”参数值错误的问题; combo:修复“isValid”方法无法返回布尔值的问题; combo:修复点击页面某一个combo组件的...
jQuery EasyUI中的日期控件DateBox很好用的,首先需要引入jquery文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo&...
jQuery EasyUI API 中文文档 - DateBox日期框,需要的朋友可以参考下。
下面小编就为大家带来一篇给easyui datebox扩展一个清空按钮的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jQuery EasyUI 1.4.1版本更新内容: Bug(修复) combogrid:修复combogrid组件和其他combo组件高度不一致的问题; datagrid:修复在datagrid行元素调用“updateRow”方法的时候丢失某些类样式的问题; ...
本篇文章主要介绍了EasyUI修改DateBox和DateTimeBox的默认日期格式示例,具有一定的参考价值,有兴趣的可以了解一下。
Bug(修复) combogrid:修复combogrid组件和其他combo组件高度不一致的问题;...datebox:添加“cloneFrom”方法来快速创建“datebox”组件; datetimebox:添加“cloneFrom”方法来快速创建“datetimebox”组件。
主要介绍了EasyUI Datebox 日期验证之开始日期小于结束时间,需要的朋友可以参考下
实现easyui的datebox格式化。效果如下,用“++”隔开,看你喜欢用什么都可以。 1、html 证件有效期至: <span><input id=passvali name=hotel.passvali> 2、js /* 证件有效期至 */ $('#passvali')....
jQuery easyUI 培训 教程 1 Accordion(可折叠标签) 2 1.1 实例 2 1.2 参数 3 2 DateBox(日期框) 4 2.1 实例 4 2.2 参数 6 2.3 事件 6 2.4 方法 6 3 ComboBox(组合框) 7 3.1 实例 7 3.2 参数 9 3.3 事件 9 3.4 ...
jQuery EasyUI 1.5.5 版本更新内容 Bug(修复) tabs:修复当标题包含符合元素时,所选择的历史顺序错误的问题; combo:修复当设置了一个较大的'delay'值的时候下拉面板可能不会被隐藏的问题; layout:修复当鼠标...