zoukankan      html  css  js  c++  java
  • 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
    <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
    <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
    <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

    当选择一个日期时触发

     
     
  • 相关阅读:
    会计基础第二次模拟题(4)
    会计基础第二次模拟题(3)
    会计基础第二次模拟题(2)
    如何使用印象笔记进行更好的学习呢?
    怎么安装WinXP和Win7双系统
    清理和关闭多余的Windows 7系统服务
    Foxmail邮箱最新应用指南二
    Windows 系统提示“内存不足”的原因及解决方法
    会计基础第二次模拟试题(1)
    关于后端程序开发如何评估工作量的方法
  • 原文地址:https://www.cnblogs.com/zkwarrior/p/4827363.html
Copyright © 2011-2022 走看看