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的基本使用的更多相关文章

  1. jQueryEasyUI

    jQueryEasyUI 编辑 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者 ...

  2. 在Asp.Net中使用jQueryEasyUI(转)

    最近做一个小工具,列表显示页面准备使用jQuery的UI框架,因为之前知道有jQWidgets这个框架,所以直接就下载下来使用了,jQWidgets的功能很强大,Demo和文档也非常详细,但使用后发现 ...

  3. 轻量级的日期插件--datebox

    jquery的日期插件有好几款,H5中的input也可以自带日期选择.但为什么要再写一个,有两个理由,一个是引用的文件太大,而有时候只需要很简单的功能,二个是想加一些自定义的效果不好改. 我写的这个功 ...

  4. 关于JqueryEasyUI集合Kindeditor

    写在前面 上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...

  5. jquery-easyui 树的使用笔记

    通常还是使用jquery-ui, 它是完全免费的, jquery-easyui可以使用 freeware edition. 但easyui还不是完全免费的: 它是基于jquery, 但是第三方开发的, ...

  6. easyui datebox 扩展清空按钮及日期判断

    <input id="EndHavDate" class="easyui-datebox" data-options="prompt:'请选择结 ...

  7. easyui datebox 设置不可编辑

    easyui datebox不允许编辑可以输入 editable="false"<input class="easyui-datebox" editabl ...

  8. Easyui datebox 限制时间选择范围

    Require Date: <input class="easyui-datebox" data-options="formatter:myformatter,pa ...

  9. JQuery-EasyUI与EXTjs有什么区别？

    一.ExtJS1.ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.因此,可以把ExtJS用在 ...

随机推荐

  1. Cobbler自动化批量安装linux服务器的操作记录

    Cobbler为何物?Cobbler是一个快速网络安装linux的服务,而且在经过调整也可以支持网络安装windows.该工具使用python开发,小巧轻便(才15k行python代码),使用简单的命 ...

  2. 《JAVA与模式》之适配器模式(转)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapter)模式的: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能 ...

  3. iBatis.Net（C#）数据库查询

    引用请注明http://www.cnblogs.com/13590/archive/2013/03/14/2958735.html  摘要:查询是数据库SQL语言的核心,本文介绍了通过iBatis.N ...

  4. Android自动化压力测试图解教程——Monkey工具

    [置顶] Android自动化压力测试图解教程--Monkey工具 标签: 测试androidprofiling工具测试工具文档 2012-04-01 10:16 38185人阅读 评论(10) 收藏 ...

  5. word 2010自定义快捷键提高工作效率

    经常使用word处理文档, 做笔记的时候会把word文档框缩小,以便同时看pdf同时记录笔记,但是缩小的word框不能把所有的菜单项显示出来,我比较常用那个插入边框下面的那个横线来做分割符,但是缩小了 ...

  6. 20145208 《Java程序设计》第7周学习总结

    20145208 <Java程序设计>第7周学习总结 教材学习内容总结 Lambda 认识Lambda语法 什么是Lambda语法 以下是维基百科上的解释: a function (or ...

  7. SQL Server 收缩日志

    一. SQL Server 2008 收缩日志 (1) 使用SQL管理器收缩日志 第一步执行如下命令 ALTER DATABASE platform SET RECOVERY SIMPLE GO 第二 ...

  8. Unity Networking API文档翻译（二）：The High Level API

    高级API (HLAPI) 是用来提供给Unity 创建多人在线游戏的组件.它是在底层传输层的基础上构建的, 对多人在线游戏提供了很多通用的功能.当传输层支持各种网络拓扑结构的时候,HLAPI是一个功 ...

  9. How to set China Azure Storage Connection String

    Configure Visual Studio to access China Azure Storage Open Visual Studio 2012, Server Explorer Add n ...

  10. android之显示数据库信息

    关键字 ListView adapter MVC 在android开发中也使用到了MVC架构,其中的xml布局文件就是V,M就是我们定义好的javabean类,而控制器就是就是适配器类adapter ...