jQueryEasyUI DateBox的基本使用
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>
</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 |
当选择一个日期时触发 |
|
