jQueryEasyUI DateBox的基本使用
转载
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) { vary = date.getFullYear(); varm = date.getMonth() + 1; vard = date.getDate(); returny + "年"+ (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() { varoptions = { required: "true", missingMessage: "必填项", formatter: function(date) { vary = date.getFullYear(); varm = date.getMonth() + 1; vard = date.getDate(); returny + "年"+ (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
|
当选择一个日期时触发
|
|
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
