zoukankan      html  css  js  c++  java
  • 第二百一十五节,jQuery EasyUI,DateBox(日期输入框)组件

    jQuery EasyUI,DateBox(日期输入框)组件

     

    学习要点:

      1.加载方式

      2.属性列表

      3.事件列表

      4.方法列表

    本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使用方法,这个组件依赖于 Combo(自定义下拉框)和 Calendar(日历)。

    一.加载方式

    class 加载方式

    <input id="box" type="text" class="easyui-datebox" required="required">

    datebox()将一个输入框元素执行日期输入框方法

    JS 加载调用

    $('#box').datebox({
    });

    二.属性列表

    Datebox 属性,扩展自 Combo(自定义下拉框)组件,所以Combo(自定义下拉框)组件的属性也是有效的

     

    panelWidth   number 下拉日历面板宽度。默认值180。

    $(function () {
        $('#box').datebox({
            panelWidth:147,
            panelHeight:200
        });
    });

    panelHeight   number 下拉日历面板高度。默认值 auto。

    $(function () {
        $('#box').datebox({
            panelWidth:147,
            panelHeight:200
        });
    });

    currentText   string 显示当天按钮。默认值 Today。设置今天按钮文字

    $(function () {
        $('#box').datebox({
            panelWidth:147,
            panelHeight:200,
            currentText:'T',
            closeText:'C'
        });
    });

    closeText   string 显示关闭按钮。默认值 Close。设置关闭按钮文字

    $(function () {
        $('#box').datebox({
            panelWidth:147,
            panelHeight:200,
            currentText:'T',
            closeText:'C'
        });
    });

    okText   string 显示 OK 按钮。默认值 Ok。异常

    disabled   boolean 该属性值为 true 时禁用该字段。默认值 false。

    $(function () {
        $('#box').datebox({
            panelWidth:147,
            panelHeight:200,
            disabled:true   //该属性值为 true 时禁用该字段。默认值 false。
        });
    });

    buttons   array 在日历下面的按钮。拓展日历下面的按钮

    $(function () {
        //插入拓展按钮
        var buttons = $.extend([], $.fn.datebox.defaults.buttons);
        buttons.splice(1, 0, {
            text: '确定',   //按钮名称
            handler: function (target) {
                alert('确定');
            }
        });
    
        $('#box').datebox({
            panelWidth: 147,
            panelHeight: 200,
            buttons: buttons   //自定义拓展按钮
        });
    });

    sharedCalendar   string,selector 将 一 个 日 历 控 件 共 享 给 多 个datebox 控件使用。默认值 null。就是将一个设置好的日历组件共用到多个输入框

     html

    <input class="box">
    <input class="box">
    <!--一个div-->
    <div id="sc"></div>

    js

    $(function () {
        $('.box').datebox({             //将两个输入框,执行日期输入框方法
            panelWidth: 147,
            panelHeight: 200,
            sharedCalendar:'#sc'        //将日历控件指向id为sc的元素
        });
        $('#sc').calendar({             //将id为sc元素执行日历方法
            firstDay:1
        })
    });

    formatter   function该函数用于格式化日期,它有一个'date'参数并且会返回一个字符串类型的值。下面的一个例子展示了如何重写默认的 formatter 函数。格式化日期

    $(function () {
        $('#box').datebox({             
            panelWidth: 147,
            panelHeight: 200,
            formatter:function (date) {  //重新格式化如果,以/作为分隔符
                return date.getFullYear() + '/' + date.getMonth() + 1 + '/' + date.getDate();
            }
        });
    });

    parser   function该函数用于解析一个日期字符串,它有一个'date'字符串参数并且会返回一个日期类型的值。将输入框的日期固定一个日期值,无论怎么选择它都是这个值

    $(function () {
        $('#box').datebox({
            panelWidth: 147,
            panelHeight: 200,
            parser:function (date) {
                return new Date(2015,6,1);
            }
        });
    });

    三.事件列表

    onSelect   date 在用户选择一天的时候触发。

    $(function () {
        $('#box').datebox({
            panelWidth: 147,
            panelHeight: 200,
            onSelect:function (date) {      //在用户选择一天的时候触发
                alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":" + date.getDate());
            }
        });
    });

    四.方法列表

    options   none 返回参数对象。

    $(function () {
        $('#box').datebox({
            panelWidth: 147,
            panelHeight: 200,
        });
        alert($('#box').datebox('options'));
    });


    calendar   none 返回日历对象。

    $(function () {
        $('#box').datebox({
            panelWidth: 147,
            panelHeight: 200,
        });
        //得到日历对象,再将日历的星期一放到最前面
        $('#box').datebox('calendar').calendar({
            firstDay: 1,
        });
    });


    setValue   value 设置日期输入的值。初始化日历输入框里的value值

    $(function () {
        $('#box').datebox({
            panelWidth: 147,
            panelHeight: 200,
        });
        $('#box').datebox('setValue','2015-6-1');   //初始化日历输入框里的value值
    });

    我们可以使用$.fn.databox.defaults 重写默认值对象。

  • 相关阅读:
    5.4 省选模拟赛 修改 线段树优化dp 线段树上二分
    一本通 高手训练 1782 分层图 状压dp
    luogu P3830 [SHOI2012]随机树 期望 dp
    5.2 省选模拟赛 或许 线型基
    luogu P4562 [JXOI2018]游戏 组合数学
    一本通 高手训练 1781 死亡之树 状态压缩dp
    luogu P4726 【模板】多项式指数函数 多项式 exp 牛顿迭代 泰勒展开
    4.28 省选模拟赛 负环 倍增 矩阵乘法 dp
    HDU 1756 Cupid's Arrow 计算几何 判断一个点是否在多边形内
    一本通 高手训练 1763 简单树 可持久化线段树 树链刨分 标记永久化
  • 原文地址:https://www.cnblogs.com/adc8868/p/6670140.html
Copyright © 2011-2022 走看看