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. extjs ajax请求与struts2进行交互

    sencha extjs 5 增加一个struts2的配置,这样可以在设置好前台布局之后,与后台交互获取数据显示.现在有一个问题是struts2对于url的跳转action支 持比较良好,但是对于像E ...

  2. 19Spring_AOP编程(AspectJ)_使用@Pointcut注解来定义切点

    我们之前的方式是采用 @AfterReturning(value="execution(* com.guigu.shen.anotion.UserDaoImpl.*(..))",r ...

  3. qrcodeJS生成二维码

    后续抽时间自己来整理笔记 http://code.ciaoca.com/javascript/qrcode/

  4. Wifi开发技术总结1

    摘要: 刚刚接触wifi开发的东西,用的模块是 ESP8266-12E. 资料很多,淘宝地址:https://item.taobao.com/item.htm?spm=a1z09.2.9.10.qGL ...

  5. AS2.0大步更新 Google强势逆天

    New Features in Android Studio 2.0Instant Run: Faster Build & Deploy逆天吗?你还在羡慕iOS的playground吗?And ...

  6. jdbc 得到表结构、主键

    jdbc 得到表结构.主键 标签: jdbctablenullschema数据库mysql 2012-02-16 22:13 11889人阅读 评论(0) 收藏 举报  分类: Java(71)  假 ...

  7. 从0开始学Java——JSP&Servlet——Tomcat和Apache的区别

    从<JSP & Servlet 学习笔记>的第一章,了解到web容器:“Web容器是Servlet/jsp唯一认得的http服务器”. 在Java中,容器的类型有多种,这里要说的是 ...

  8. 获取技能的成功经验和关于C语言学习的调查 2015528

    内容提要 你有什么技能比大多人(超过90%以上)更好?针对这个技能的获取你有什么成功的经验?与老师博客中的学习经验有什么共通之处? 有关C语言学习的调查 你是怎么学习C语言的?(作业,实验,教材,其他 ...

  9. iOS - 语音云通讯

    iOS SDK 2.0 语音及图片消息详解本文档将详细介绍融云的语音及图片消息接口功能及使用说明.阅读本文前,我们假设您已经阅读了融云 iOS 开发指南,并掌握融云 SDK 的基本用法. 语音消息用来 ...

  10. MongoDB驱动之Linq操作

    添加下面命名空间到您的程序中: using MongoDB.Driver.Linq; 声明一变量保存对集合的引用 var collection = database.GetCollection< ...