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. jQuery on()，live()，trigger()

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map); 由此扩展开来的几个以前常见的方 ...

  2. IOS证书／私钥／代码签名／描述文件

    1.   相关资源 (1)   钥匙串程序(常用工具->钥匙串),用于创建证书请求.安装证书.导出私钥等 (2)   IOS开发中心:https://developer.apple.com/de ...

  3. 如何在.net4.0中使用.net4.5的async/await

    推荐文章: http://www.cnblogs.com/hj4444/p/3857771.html http://www.cnblogs.com/dozer/archive/2012/03/06/a ...

  4. Git之分支创建策略

    分支策略:git上始终保持两个分支,master分支与develop分支.master分支主要用于发布时使用,而develop分支主要用于开发使用. 创建master的分支developgit che ...

  5. [资料收集]MySQL在线DDL工具pt-online-schema-change

    MySQL在线DDL工具pt-online-schema-change pt-online-schema-change使用说明(未完待续) 官网

  6. MSMQ消息队列安装

    一.Windows 7安装.管理消息队列1.安装消息队列   执行用户必须要有本地 Administrators 组中的成员身份,或等效身份.   具体步骤:    开始—>控制面板—>程 ...

  7. 实现可以滑动的GrildView，类似美团网首页的GrildView功能菜单

    首先上实现效果图,不会做动态图,就先凑合着看吧 使用了网上的一个开源控件viewpagerindicator,可以自定义切换时候显示的标记,圆点,或者下划线. GrildView显示的是手机上的全部a ...

  8. 各种python环境的问题

    [OS] mac [ERROR] decoder jpeg not available [SOLUTION] $ pip uninstall pillow $ brew install libjpeg ...

  9. LINUX下C语言编程基础

    实验二 Linux下C语言编程基础 一.实验目的 1. 熟悉Linux系统下的开发环境 2. 熟悉vi的基本操作 3. 熟悉gcc编译器的基本原理 4. 熟练使用gcc编译器的常用选项 5 .熟练使用 ...

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

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