您的位置:68399皇家赌场 > 服务器租用 > 【www.68399.com】详解easyui基于 layui.laydate日期扩大

【www.68399.com】详解easyui基于 layui.laydate日期扩大

发布时间:2019-06-29 00:32编辑:服务器租用浏览(117)

    jQuery EasyUI中的日期控件DateBox很好用的,首先需求引进jquery文件,代码如下:

    自家后端开采码农二个,公司前端忙的一逼,项目应用的是easyui组件,其自带的datebox组件使用起来特别优伤,主要表以后

    看了网络有好些个的缓和措施,小编也写三个比较轻易方法。完成easyui的datebox格式化。效果如下,用“ ”隔离,看你喜欢用如何都足以。

    近年来整理Easyui控件的时候,对Easyui的DateBox控件和DateTimeBox控件实行了梳头,而自身由此将EasyUI的DateBox控件和DateTimeBox控件放在一块儿,归为一类,是因为那七个控件未有怎么差距,固然您非得说那多个控件有分别,也唯有是Date提姆eBox控件后边除了大旨的年月日之外带上了小时可能分钟恐怕秒什么的,更何况,那八个控件在开始展览日期格式化时所采取的措施也是毫无二致的。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    </head>
    <body>
    <div> <input class="easyui-datebox"></input> </div>
    </body>
    </html>
    

    1、自定义展现格式很艰辛

     www.68399.com 1

    DateBox介绍:

    效果为:

    2、选拔年份和月份用户体验也倒霉

    1、html

    德姆o实例参看:

    www.68399.com 2 

    网络有关于和 My97DatePicker 结合的例证,但以为也用的不是很爽。

    证件有效期至: 
    <input id="passvali" name="hotel.passvali"> 
    

    质量方法介绍参看: 

    这边是英文的,要是有供给用普通话的,那么须求的改的多少个地方,首先是月份的,找到下边包车型大巴代码:

    察觉境内的layDate体验十三分惬意,所以萌生出想把那四个零部件组合起来的主张,具体代码如下,自身非前端,所以只是完毕了基本作用,大神勿喷哦。

    2、js

    DateTimeBox介绍:

    $.fn.calendar.parseOptions=function(_454){
    var t=$(_454);
    return $.extend({},$.parser.parseOptions(_454,["width","height",{firstDay:"number",fit:"boolean",border:"boolean"}]));
    };
    $.fn.calendar.defaults={width:180,height:180,fit:false,border:true,firstDay:0,weeks:["S","M","T","W","T","F","S"],months:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],year:new Date().getFullYear(),month:new Date().getMonth() 1,current:new Date(),onSelect:function(date){
    }};
    })(jQuery);
    

    easyUI版本:V1.5.2

    /* 证件有效期至 */
     $('#passvali').datebox({
     formatter: function(date){ 
     var years=date.getFullYear();//获取年
     var months=date.getMonth() 1;//获取日
     var dates=date.getDate();//获取月
    
     if(months<10){//当月份不满10的时候前面补0,例如09
     months='0' months;
     }
    
     if(dates<10){//当日期不满10的时候前面补0,例如09
     dates='0' dates;
     }
     return years "  " months "  " dates;//根据自己需求进行改动
     }
     });
    

    德姆o实例参看:http://www.jeasyui.com/demo/main/index.php?plugin=DateTimeBox&theme=default&dir=ltr&pitem=   

    改成上边包车型客车呼应的

    layDate版本:V5.0

    补充:

    品质方法介绍参看:

    $.fn.calendar.parseOptions=function(_454){
    var t=$(_454);
    return $.extend({},$.parser.parseOptions(_454,["width","height",{firstDay:"number",fit:"boolean",border:"boolean"}]));
    };
    $.fn.calendar.defaults={width:180,height:180,fit:false,border:true,firstDay:0,weeks:["一", "二", "三", "四", "五", "六", "日"], months:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], year:new Date().getFullYear(),month:new Date().getMonth() 1,current:new Date(),onSelect:function(date){
    }};
    })(jQuery);
    
    /*
    基于laydate日期扩展组件
    */
    (function ($) {
      function createBox(target) {
        var state = $.data(target, 'laydate');
        var opts = state.options;
        $(target).addClass('datebox-f').textbox($.extend({}, opts, {
          editable: false,
          icons: [{ iconCls: 'combo-arrow' }]
        }));
        $(target).next("span.textbox").addClass('datebox');
        laydate.render({
          elem: '#'   $(target).next("span.textbox").children(":text").attr("id"), //指定元素,
          format: opts.format,
          type: opts.datetype,
          min: opts.min,
          max: opts.max,
          zIndex :opts.zIndex ,
          range :opts.range ,
          theme: opts.theme,
          calendar: opts.calendar,
          mark: opts.mark,
          done: function (value, date, endDate) {
            $(target).textbox('setValue', value);
            opts.onSelect.call(target, value, date, endDate);
          },
          change: function(value, date, endDate) {
            opts.onChange.call(target, value, date, endDate);
          }
        });
      }
      $.parser.plugins.push("laydate");//注册扩展组件
      $.fn.laydate = function (options, param) {
        if (typeof options == 'string') {
          var method = $.fn.laydate.methods[options];
          if (method) {
            return method(this, param);
          } else {
            return this.textbox(options, param);
          }
        }
        options = options || {};
        return this.each(function () {
          var state = $.data(this, 'laydate');
          if (state) {
            $.extend(state.options, options);
          } else {
            $.data(this, 'laydate', {
              options: $.extend({}, $.fn.laydate.defaults, $.fn.laydate.parseOptions(this), options)
            });
          }
          createBox(this);
        });
      };
      $.fn.laydate.methods = {
        options: function (jq) {
          var copts = jq.textbox('options');
          return $.extend($.data(jq[0], 'laydate').options, {
            width: copts.width,
            height: copts.height,
            originalValue: copts.originalValue,
            disabled: copts.disabled,
            readonly: copts.readonly
          });
        }
      };
      $.fn.laydate.parseOptions = function (target) {
        return $.extend({}, $.fn.textbox.parseOptions(target));
      };
      $.fn.laydate.defaults = $.extend({}, $.fn.textbox.defaults,
        {
          //laydate 参数说明:http://www.layui.com/doc/modules/laydate.html#type
          theme: "#0099cc",
          datetype: "date",//控件选择类型 year month date time datetime
          range: false,//开启左右面板范围选择 或 range: '~' 来自定义分割字符
    
          //最小/大范围内的日期时间值 
          //如果值为字符类型,则:年月日必须用 -(中划线)分割、时分秒必须用 :(半角冒号)号分割。这里并非遵循 format 设定的格式
          //如果值为整数类型,且数字<86400000,则数字代表天数,如:min: -7,即代表最小日期在7天前,正数代表若干天后
          //如果值为整数类型,且数字 ≥ 86400000,则数字代表时间戳,如:max: 4073558400000,即代表最大日期在:公元3000年1月1日
          min: '1900-1-1',
          max: '2099-12-31',
    
          format: "yyyy-MM-dd",//自定义格式
          zIndex: 66666666,//层叠顺序
          calendar: false,//是否显示公历节日
    
          //标注重要日子
          //每年的日期 {'0-9-18': '国耻'} 0 即代表每一年
          //每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月(layui 2.1.1/layDate 5.0.4 新增)
          //特定的日期 {'2017-8-21': '发布')
          mark: {},
          onSelect: function (value, date, endDate) { },
          onChange: function (value, date, endDate) { }
        });
    
    })(jQuery);
    

    DateBox日期突显暗中认可的格式为“dd/mm/yyyy”,借使想自定义成大家的格式供给完毕三个函数,formatter和parser。
    formatter函数使得选取日期后将其格式化为我们供给的格式,parser函数在增选好日期后告诉控件怎样去深入分析大家自定义的格式。
    概念如下:
    formatter:A function to format the date, the function take a 'date' parameter and return a string value.
    parser:A function to parse a date string, the function take a 'date' string and return a date value.
    如将日期格式化为yyyy-mm-dd的格式:

    控件的暗许格式:

    那般就行了,还会有一个年华格式的改变,暗中同意的是5/27/贰零壹叁,即月/日/年的格式,假使换到的二〇一二-05-27这么的,官方也交由了代码,如下:

    利用格局一:

    $('#dd1').datebox({
     formatter: function(date){ return date.getFullYear() '-' (date.getMonth() 1) '-' date.getDate();},
     parser: function(date){ return new Date(Date.parse(date.replace(/-/g,"/")));}
    });
    

     DateBox控件私下认可的日子格式是:                           Date提姆e博克斯控件暗中同意日期格式是:

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:【www.68399.com】详解easyui基于 layui.laydate日期扩大

    关键词: 68399皇家赌场

上一篇:怎样在 Windows 10 中搭建 Node.js 遇到?

下一篇:没有了