jQueryEasyUI DateBox的基本使用

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

当选择一个日期时触发

 
 
分类: EasyUI学习
 
posted @   _海阔天空  阅读(494)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛