最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

詳解easyui基于 layui.laydate日期擴(kuò)展組件

 更新時(shí)間:2018年07月18日 10:45:43   作者:做飯不洗碗  
這篇文章主要介紹了詳解easyui基于 layui.laydate日期擴(kuò)展組件,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本人后端開(kāi)發(fā)碼農(nóng)一個(gè),公司前端忙的一逼,項(xiàng)目使用的是easyui組件,其自帶的datebox組件使用起來(lái)非常不爽,主要表現(xiàn)在

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

2、選擇年份和月份用戶(hù)體驗(yàn)也不好

網(wǎng)上有關(guān)于和 My97DatePicker 結(jié)合的例子,但感覺(jué)也用的不是很爽。

發(fā)現(xiàn)國(guó)內(nèi)的layDate體驗(yàn)非常滿(mǎn)意,所以萌生出想把這兩個(gè)組件組合起來(lái)的想法,具體代碼如下,本人非前端,所以只是實(shí)現(xiàn)了基本功能,大神勿噴哦。

easyUI版本:V1.5.2

layDate版本:V5.0

/*
基于laydate日期擴(kuò)展組件
*/
(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");//注冊(cè)擴(kuò)展組件
  $.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 參數(shù)說(shuō)明:http://www.layui.com/doc/modules/laydate.html#type
      theme: "#0099cc",
      datetype: "date",//控件選擇類(lèi)型 year month date time datetime
      range: false,//開(kāi)啟左右面板范圍選擇 或 range: '~' 來(lái)自定義分割字符

      //最小/大范圍內(nèi)的日期時(shí)間值 
      //如果值為字符類(lèi)型,則:年月日必須用 -(中劃線(xiàn))分割、時(shí)分秒必須用 :(半角冒號(hào))號(hào)分割。這里并非遵循 format 設(shè)定的格式
      //如果值為整數(shù)類(lèi)型,且數(shù)字<86400000,則數(shù)字代表天數(shù),如:min: -7,即代表最小日期在7天前,正數(shù)代表若干天后
      //如果值為整數(shù)類(lèi)型,且數(shù)字 ≥ 86400000,則數(shù)字代表時(shí)間戳,如:max: 4073558400000,即代表最大日期在:公元3000年1月1日
      min: '1900-1-1',
      max: '2099-12-31',

      format: "yyyy-MM-dd",//自定義格式
      zIndex: 66666666,//層疊順序
      calendar: false,//是否顯示公歷節(jié)日

      //標(biāo)注重要日子
      //每年的日期 {'0-9-18': '國(guó)恥'} 0 即代表每一年
      //每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月(layui 2.1.1/layDate 5.0.4 新增)
      //特定的日期 {'2017-8-21': '發(fā)布')
      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文件了哦

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論

民县| 琼结县| 墨脱县| 双峰县| 治多县| 玉田县| 新乡县| 巴塘县| 蒙山县| 若羌县| 迭部县| 札达县| 道孚县| 株洲市| 惠州市| 龙岩市| 肥乡县| 自治县| 庆城县| 会理县| 濮阳市| 娱乐| 承德市| 昭通市| 三明市| 清水县| 蒲城县| 万源市| 黄浦区| 大宁县| 陈巴尔虎旗| 巫山县| 孟连| 微山县| 泰顺县| 和田市| 都江堰市| 芜湖县| 介休市| 肥东县| 龙川县|