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. UITableViewCell动态AutoLayout布局

    相关链接: 使用Autolayout实现UITableView的Cell动态布局和高度动态改变 IOS tableView cell动态高度 (autoLayout) AutoLayoutClub 使 ...

  2. 安卓版微信内置浏览器，<a href="tel:电话号码"></a> 这个链接失效，不能跳到拨号界面？

    https://segmentfault.com/q/1010000000318831 在URL最后面加“ #mp.weixin.qq.com ”,应该加其他qq.com的二级域名都行,估计是微信的安 ...

  3. 关于Java多态

    什么是多态 同一个实现接口,使用不同的实例而执行不同的操作 子类转换成父类的规则: *将一个父类的引用指向一个子类对象时,称为上转型,自动进行类型转换 *此时通过父类引用变量调用的方法是子类覆盖或继承 ...

  4. 3016 质子撞击炮 II

    3016 质子撞击炮 II  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description [抱歉数据错误~~已修 ...

  5. System类及其常用函数

    System 类包含一些有用的类字段和方法.它不能被实例化. 常用方法: 1.static void arraycopy(Object src, int srcPos, Object dest, in ...

  6. java从0开始学——数组，一维和多维

    #,在java中,允许数组的长度为0:也就是允许      int[] zeroLenthArray = new int[0]; #,匿名的数组初始化是合法的:     int[] smallPrim ...

  7. linux内核分析 第七周

    一.课堂相关 (一)预处理.编译.链接和目标文件的格式 1.可执行程序是怎么得来的 C代码--预处理--汇编代码--目标代码--可执行文件 预处理负责把include的文件包含进来及宏替换工作. he ...

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

    20145208 <Java程序设计>第6周学习总结 教材学习内容总结 输入与输出 InputStream与OutputStream 从应用程序角度来看,如果要将数据从来源取出,可以使用输 ...

  9. EF 基本数据过滤

    没猜错的话, 你们一定会和一大堆查询条件过不去, 重复的写,反复的写, 写到山崩地裂. 今天看了园友的文字:实体框架高级应用之动态过滤 EntityFramework DynamicFilters 我 ...

  10. 【niubi-job——一个分布式的任务调度框架】----安装教程

    niubi-job是什么 niubi-job是LZ耗时三个星期,费尽心血打造的一个具备高可靠性以及水平扩展能力的分布式任务调度框架,采用quartz作为底层的任务调度管理器,zookeeper做集群的 ...