Layui框架整理

loading框

var loading = layer.load(2, {
    shade: false,
    time: 2*1000
});
layer.close(loading);

laydate 日期选择 开始时间和结束时间

开始时间：

var startLaydate = laydate.render({
   elem: '#startTime', //指定元素
   type: 'datetime',
   trigger: 'click',
   done: function(value, date, endDate) {
           var startT = new Date(value);
           var startStamp = startT.getTime();
           var endStamp = startStamp +1000;
           if(endStamp.length == 10) {
               endStamp = endStamp * 1000
           }
           var date1 = new Date(endStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
           var Y = date1.getFullYear() ;
           var M = date1.getMonth();
           var D = date1.getDate() ;
           var h = date1.getHours() ;
           var m = date1.getMinutes();
           var s = date1.getSeconds();
      endLaydaye.config.min = {
               year:Y,
               month: M,
               date: D,
               hours:h,
               minutes:m,
               seconds:s
      }
     
   }
});

结束时间

var endLaydaye = laydate.render({
   elem: '#endTime', //指定元素
   type: 'datetime',
   trigger: 'click',
   done: function(value, date, endDate) {
           var startT = new Date(value);
           var startStamp = startT.getTime();
           var endStamp = startStamp -1;
           if(endStamp.length == 10) {
               endStamp = endStamp * 1000
           }
           var date1 = new Date(endStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
           var Y = date1.getFullYear() ;
           var M = date1.getMonth() ;
           var D = date1.getDate() ;
           var h = date1.getHours() ;
           var m = date1.getMinutes();
           var s = date1.getSeconds();
      startLaydate.config.max = {
               year:Y,
               month: M,
               date: D,
               hours:h,
               minutes:m,
               seconds:s
      }
   }
});

弹窗打开关闭方式

var xzfatcIdx
//打开
publicFun.openxzfatc = function (title, html) {
    xzfatcIdx = layer.open({
        type: 1,    // 弹窗类型
        title: false,  // 标题
        content: $('#xzfatcAlert'), //这里content是一个DOM
        area: ['440px', 'auto'], // 宽高
        id: "leftxzfatc",  // 用于控制弹层唯一标识
        offset: ['80px', '290px'],
        shade: 0,
        closeBtn: 0,
        resize: false,
        anim: 5,
        isOutAnim: false,
        success: function (layero, index) {   // 层弹出后的成功回调方法
          
        }, end: function () {
          
        }
    });
}
// 关闭
publicFun.closexzfatc = function () {
    xzfatcIdx = $("#leftxzfatc").parent().attr("times");
    layer.close(xzfatcIdx);
};

时间选择器添加标注

css：
.layui-laydate-content td.activeTd{
    position: relative;
}
.layui-laydate-content td.activeTd::after {
    position: absolute;
    content: '';
    right: 2px;
    top: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #09bbff;
}
.layui-laydate-list li.activeTd{
    position: relative;
}
.layui-laydate-list li.activeTd::after {
    position: absolute;
    content: '';
    right: 2px;
    top: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #09bbff;
}

var initTimeArr=["2002-06-01", "2002-06-02", "2002-06-03", "2002-06-04", "2002-06-05", "2002-06-06", "2002-06-07", "2002-06-08", "2002-06-09", "2002-06-10", "2002-06-11", "2002-06-12", "2002-06-13", "2002-06-14", "2002-06-15", "2002-06-16", "2002-06-17", "2002-06-18", "2002-06-19", "2002-06-20", "2002-06-21", "2002-06-22", "2002-06-23", "2002-06-24", "2002-06-25", "2002-06-26", "2002-06-27", "2002-06-29", "2002-06-30", "2002-07-01", "2002-07-02", "2002-07-03", "2002-07-04", "2002-07-05", "2002-07-06", "2002-07-07", "2002-07-08", "2002-07-09", "2002-07-10", "2002-07-11", "2002-07-12", "2002-07-13", "2002-07-14", "2002-07-15", "2002-07-16", "2002-07-17", "2002-07-18", "2002-07-19", "2002-07-20", "2002-07-21", "2002-07-22", "2002-07-23", "2002-07-24"]
laydate.render({
     elem: '#treeTime' //指定元素
      , type: 'date'
      , format: 'yyyy-MM-dd'
      , value:  "2002-07-21"
      , isInitValue: true
      , min: '1950-01-01'
      , max: 0
      , theme: '#264c84'
      // , mark: markList
      , btns: ['clear']
      , done: function (value, date, endDate) {
      }
      , change: function (value, date, endDate) {
          initMarketTime(initTimeArr)
      }
      , ready: function (date) {
          initMarketTime(initTimeArr)
          $(".layui-laydate .laydate-set-ym span").unbind("click")
          $(".layui-laydate .laydate-set-ym span").click(function () {
              initMarketTime(initTimeArr)
          })
      }
  });

//起报时间标注有数据
function initMarketTime(initTimeArr) {
    let listLength = $(".layui-laydate-list").length;
    if (listLength == 0) {
        // 具体年月日
        let tdDom = $(".layui-laydate-content td")
        tdDom.each((index, item) => {
            let time = $(item).attr("lay-ymd")
            if (initTimeArr.indexOf(DateToformatDate(time, "YYYY-MM-DD")) != -1) {
                $(item).addClass("activeTd")
            }
        })
    } else {
        let tdDom = $(".layui-laydate-list li")
        tdDom.each((index, item) => {
            let time = $(item).attr("lay-ym")
            let text = $(item).text()
            if (text.indexOf("年") != -1) {
                if (initTimeArr.length > 0) {
                    initTimeArr.forEach((it, idx) => {
                        let year = it.slice(0, 4)
                        if (year == time) {
                            $(item).addClass("activeTd")
                        }
                    })
                }
            } else if (text.indexOf("月") != -1) {
                if (initTimeArr.length > 0) {
                    initTimeArr.forEach((it, idx) => {
                        let year = it.slice(0, 4)
                        let year2 = $(".laydate-set-ym span").eq(0).attr("lay-ym").slice(0, 4)
                        let month = it.slice(5, 7)
                        let month2 = (Number(time) + 1) < 10 ? "0" + (Number(time) + 1) : (Number(time) + 1)
                        if (month == month2 && year2 == year) {
                            $(item).addClass("activeTd")
                        }
                    })
                }

            }

        })
    }
 
}