zoukankan      html  css  js  c++  java
  • DateBox( 日期输入框) 组件

      本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使用方法,这个组件依赖于

    Combo(自定义下拉框)和 Calendar(日历)。


    一. 加载方式
    //class 加载方式
    <input id="box" type="text" class="easyui-datebox"
    required="required">
    //JS 加载调用
    $('#box').datebox({
    });

    二. 属性列表

    //属性设置
    $('#box').datebox({
    panelWidth : 300,
    panelHeight : 300,
    currentText : '今',
    closeText : '关',
    okText : '确定',
    disabled : true,
    buttons : buttons,
    formatter : function (date) {
    return date.getFullYear() + '/' + date.getMonth() + 1 +
    '/' + date.getDate();
    },
    parser : function (s) {
    return new Date(2015,6,1);
    }
    });
    var buttons = $.extend([], $.fn.datebox.defaults.buttons);
    buttons.splice(1, 0, {
    text: 'MyBtn',
    handler: function(target){
    alert('click MyBtn');
    }
    });
    <input class="easyui-datebox" sharedCalendar="#sc">
    <input class="easyui-datebox" sharedCalendar="#sc">
    <div id="sc" class="easyui-calendar" data-options="firstDay:1"></div>

    三. 事件列表

    //事件列表
    $('#box').calendar({
    onSelect : function (date) {
    alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":"

    + date.getDate());
    },
    });

    四. 方法列表

    //返回属性对象
    console.log($('#box').calendar('options'));
    //返回日历对象
    $('#box').datebox('calendar').calendar({
    firstDay : 1,
    });
    //设置输入日期
    $('#box').datebox('setValue','2015-6-1');
    PS:我们可以使用$.fn.databox.defaults 重写默认值对象。

  • 相关阅读:
    layer满屏/禁止最大化最小化 可以做选择框使用
    layer关闭弹窗
    导出excel
    linux中安装软件的集中方法
    nginx负载均衡
    zookeeper部署搭建
    git 分支合并处理
    前端框架
    云计算基本概念
    Android 单元测试四大组件Activity,Service,Content Provider , Broadcast Receiver
  • 原文地址:https://www.cnblogs.com/qinsilandiao/p/5012268.html
Copyright © 2011-2022 走看看