国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

詳解easyui基于 layui.laydate日期擴展組件

2019-11-19 13:28:10
字體:
來源:轉載
供稿:網友

本人后端開發碼農一個,公司前端忙的一逼,項目使用的是easyui組件,其自帶的datebox組件使用起來非常不爽,主要表現在

1、自定義顯示格式很麻煩

2、選擇年份和月份用戶體驗也不好

網上有關于和 My97DatePicker 結合的例子,但感覺也用的不是很爽。

發現國內的layDate體驗非常滿意,所以萌生出想把這兩個組件組合起來的想法,具體代碼如下,本人非前端,所以只是實現了基本功能,大神勿噴哦。

easyUI版本:V1.5.2

layDate版本:V5.0

/*基于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);

使用方法一:

<input name="BYXX" type="text" id="BYXX" class="easyui-laydate" data-options="width:200,datetype:'month'" />

使用方法二:

<input type="text" id="BYXX" />  <script type="text/javascript">    $(function () {      $("#BYXX").laydate({ width: 200, datetype: 'month' });    });  </script>

別忘記引用jquery、easyui和laydate的js文件了哦

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 敦化市| 桂东县| 天水市| 昌图县| 清丰县| 当涂县| 新营市| 云安县| 团风县| 文山县| 青铜峡市| 甘谷县| 忻城县| 内黄县| 崇州市| 双流县| 昆山市| 海原县| 汽车| 韶山市| 昌宁县| 辽中县| 炎陵县| 泸水县| 曲周县| 南平市| 潜江市| 安阳市| 嵊州市| 嘉善县| 抚松县| 湖州市| 温泉县| 丰都县| 石门县| 雅江县| 镇宁| 三河市| 青河县| 瑞丽市| 永寿县|