zoukankan      html  css  js  c++  java
  • jQueryEasyUI DateBox的基本使用

    1、基本用法

    代码:

    <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>
    

    <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、显示时间

    代码:

    <script type="text/javascript">
        $(function () {
            $("#txtDate").datetimebox();
        });
    </script>

    <input id="txtDate" type="text" class="easyui-datetimebox" />

     效果图:

     

    3、本地化

     代码:

    <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、属性设置

    代码:

    <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>

    <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、启用/禁用

    代码:

    <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

    当选择一个日期时触发

  • 相关阅读:
    前端,DJ
    打印九九乘法表
    求数组中最大值和最小值
    求数组中最大值和次大值
    数据库 Mysql 使用,优化,索引
    List、Map、Set的区别与联系
    1001个整数,每个数范围1到1000,求出重复的数字。
    一个正整数是否等于因数之和
    滑动验证 和滑动图片验证JS
    cmd中mvn命令,出现No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
  • 原文地址:https://www.cnblogs.com/libingql/p/2189977.html
Copyright © 2011-2022 走看看