zoukankan      html  css  js  c++  java
  • 日期控件

    /**
     * Created by dale on 2017/11/18.
     */
    (function () {
      var datepicker = {}, startYear;
    
      var dayDates = 0,
        weekDates = 0,
        monthDate = 0,
        yearDate = 0;
      var $wrapperDay = null,
        $wrapperWeek = null,
        $wrapperMonth = null,
        $wrapperYear = null,
        $wrapper = null,
        $wrpBox = null;
    
      // 保存日上一次查询数据
      var dayDataObj = {
        "flag": true,
        "preYear": null,
        "preMonth": null,
        "preDay": null
      };
      // 保存周上一次查询数据
      var weekDataObj = {
          "flag": true,
          "preYear": null,
          "preMonth": null,
          "preStartDay": null,
          "preEndDay": null
      };
      // 保存月上一次查询数据
      var monthDataObj = {
        "flag": true,
        "preYear": null,
        "preMonth": null,
      };
      // 保存年上一次查询数据
      var yearDataObj = {
        "flag": true,
        "preYear": null
      };
    
      /**
         * 获取日数据
         */
      datepicker.getDayData = function (year, month) {
        var ret = [];
        if (!year || !month) {
          var today = new Date();
          year = today.getFullYear();
          month = today.getMonth() + 1;
        }
        // ******获取当月的第一天******
        var firstDay = new Date(year, month - 1, 1);
        // 当月的第一天是星期几
        var firstDayWeekDay = firstDay.getDay();
        year = firstDay.getFullYear();
        month = firstDay.getMonth() + 1;
        if (firstDayWeekDay === 0) { firstDayWeekDay = 7 }
    
        // ******上个月的最后一天******
        var lastDayOfLastMonth = new Date(year, month - 1, 0);
        //上月最后一天日期1~31
        var lastDateOfLastMonth = lastDayOfLastMonth.getDate();
        // 显示多少个上个月的日期? 如果是周末7的话,前面要显示上个月的最后6天
        var preMonthDayCount = firstDayWeekDay - 1;
    
        // ******本月最后一天******
        var lastDay = new Date(year, month, 0);
        //本月最后一天日期1~31
        var lastDate = lastDay.getDate();
    
        for (var i = 0; i < 7 * 6; i++) {
          var date = i + 1 - preMonthDayCount;
          var showDate = date;
          var thisMonth = month;
          //上一月
          if (date <= 0) {
            thisMonth = month - 1;
            showDate = lastDateOfLastMonth + date;
          } else if (date > lastDate) {
            /*下一月*/
            thisMonth = month + 1;
            showDate = showDate - lastDate;
          }
          thisMonth = thisMonth === 0 ? 12 : thisMonth === 13 ? 1 : thisMonth;
          ret.push({
            month: thisMonth,
            date: date,
            showDate: showDate
          })
        }
        return {
          year: year,
          month: month,
          days: ret
        };
      }
      datepicker.getWeekData = function (year, month) {
        var ret = [];
        if (!year || !month) {
          var today = new Date();
          year = today.getFullYear();
          month = today.getMonth() + 1;
        }
        // ******获取当月的第一天******
        var firstDay = new Date(year, month - 1, 1);
        // 当月的第一天是星期几
        var firstDayWeekDay = firstDay.getDay();
        year = firstDay.getFullYear();
        month = firstDay.getMonth() + 1;
        if (firstDayWeekDay === 0) { firstDayWeekDay = 7 }
    
        // ******上个月的最后一天******
        var lastDayOfLastMonth = new Date(year, month - 1, 0);
        //上月最后一天日期1~31
        var lastDateOfLastMonth = lastDayOfLastMonth.getDate();
        // 显示多少个上个月的日期? 如果是周末7的话,前面要显示上个月的最后6天
        var preMonthDayCount = firstDayWeekDay - 1;
    
        // ******本月最后一天******
        var lastDay = new Date(year, month, 0);
        //本月最后一天日期1~31
        var lastDate = lastDay.getDate();
    
        for (var i = 0; i < 7 * 6; i++) {
          var date = i + 1 - preMonthDayCount;
          var showDate = date;
          var thisMonth = month;
          //上一月
          if (date <= 0) {
            thisMonth = month - 1;
            showDate = lastDateOfLastMonth + date;
          } else if (date > lastDate) {
            /*下一月*/
            thisMonth = month + 1;
            showDate = showDate - lastDate;
          }
          thisMonth = thisMonth === 0 ? 12 : thisMonth === 13 ? 1 : thisMonth;
          ret.push({
            month: thisMonth,
            date: date,
            showDate: showDate
          })
        }
        return {
          year: year,
          month: month,
          days: ret
        };
      }
    
        /**
         * 获取月数据
         */
      datepicker.getMonthData = function (year) {
        var ret = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        if (!year) {
          var oData = new Date();
          year = oData.getFullYear();
        }
    
        return {
          year: year,
          months: ret
        }
      }
    
        /**
         * 获取年数据
         * 
         */
      datepicker.getYearData = function (year, rangNum) {
        var ret = [], month;
        // 定义开始开始年份
        rangNum = (typeof rangNum === "undefined") ? 10 : rangNum;
    
        if (!startYear) {
          startYear = 2009;
        } else {
          startYear += rangNum;
        }
        if (!year) {
          var oData = new Date();
          year = oData.getFullYear();
        }
        var todayData = new Date();
        month = todayData.getMonth();
        for (var i = 0; i < 4 * 3; i++) {
          ret.push(startYear + i);
        }
        return {
          years: ret,
          year: year,
          month: month,
          startYear: startYear + 1,
          endYear: startYear + 10
        }
      }
    
      window.datepicker = datepicker;
    
      datepicker.buildWrpper = function () {
        var str =
          '<div class="ui-datepicker-menu" id="ui-datepicker-menu">' +
          '<span class="span_day current" data-type="date">日</span>' +
          '<span class="span_week" data-type="week">周</span>' +
          '<span class="span_month" data-type="month">月</span>' +
          '<span class="span_year" data-type="year">年</span>' +
          "</div>" +
          '<div class="ui-datepicker-cont" id="ui-datepicker-cont">' +
          '<section class="ui-datepicker-cont-item" id="dayTab" style="display: block;"></section>' +
          '<section class="ui-datepicker-cont-item" id="weekTab"></section>' +
          '<section class="ui-datepicker-cont-item" id="monthTab"></section>' +
          '<section class="ui-datepicker-cont-item" id="yearTab"></section>' +
          "</div>";
    
        return str;
      };
      datepicker.buildUi = function (year, month, oType) {
        if (oType === "day") {
          dayDates = datepicker.getDayData(year, month);
        }
        if (oType === "week") {
          weekDates = datepicker.getWeekData(year, month);
        }
    
        var current = true;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDay = today.getDate();
        // 判断是否是当前月日期, 日、周通用
        var thisDate;
    
        if (todayYear === dayDates.year && todayMonth === dayDates.month) {
          current = true;
        } else {
          current = false;
        }
        if (oType === "day") {
          var html =
            '<div class="ui-datepicker-header" id="ui-datepicker-header">' +
            '<span  class="ui-datepicker-btn ui-datepicker-prevbtn" id="prevbtn">&lt;</span>' +
            '<span  class="ui-datepicker-btn ui-datepicker-nextbtn" id="nextbtn">&gt;</span>' +
            '<span class="ui-datepicker-curr-month">' +
            dayDates.year +
            "" +
            dayDates.month +
            "月</span>" +
            "</div>" +
            '<div class="ui-datepicker-body">' +
            "<table>" +
            "<thead>" +
            "<tr>" +
            "<th>一</th>" +
            "<th>二</th>" +
            "<th>三</th>" +
            "<th>四</th>" +
            "<th>五</th>" +
            "<th>六</th>" +
            "<th>日</th>" +
            "</tr>" +
            "</tdead>" +
            "<tbody>";
          // 渲染日数据
          for (var i = 0; i < dayDates.days.length; i++) {
            var date = dayDates.days[i];
            // thisDate = dayDates.days[i];
            if (i % 7 === 0) {
              html += "<tr>";
            }
            if (date.date !== date.showDate) {
              html += '<td class="disabled" data=' + date.date + ">" + date.showDate + "</td>";
            } else {
              if (dayDataObj.flag && current && todayDay === date.showDate && todayMonth === date.month) {
                html += "<td data=" + date.date + ' class="on">' + date.showDate + "</td>";
              } else if (dayDataObj.preYear === dayDates.year && dayDataObj.preDay === date.date && dayDataObj.preMonth === date.month) {
                html += "<td data=" + date.date + ' class="on">' + date.showDate + "</td>";
              } else {
                if (todayYear === dayDates.year && todayMonth === date.month && todayDay < date.showDate) {
                  html += "<td data=" + date.date + " class='disabled'>" + date.showDate + "</td>";
                } else {
                  html += "<td data=" + date.date + ">" + date.showDate + "</td>";
                }
              }
            }
    
            if (i % 7 === 6) {
              html += "</tr>";
            }
          }
          html += "</tbody>" + "</table>" + "</div>";
          return html;
        }
        if (oType === "week") {
          var html =
            '<div class="ui-datepicker-header" id="ui-datepicker-header">' +
            '<span  class="ui-datepicker-btn ui-datepicker-prevbtn" id="prevbtn">&lt;</span>' +
            '<span  class="ui-datepicker-btn ui-datepicker-nextbtn" id="nextbtn">&gt;</span>' +
            '<span class="ui-datepicker-curr-month">' +
            weekDates.year +
            "" +
            weekDates.month +
            "月</span>" +
            "</div>" +
            '<div class="ui-datepicker-body">' +
            "<table>" +
            "<thead>" +
            "<tr>" +
            "<th>一</th>" +
            "<th>二</th>" +
            "<th>三</th>" +
            "<th>四</th>" +
            "<th>五</th>" +
            "<th>六</th>" +
            "<th>日</th>" +
            "</tr>" +
            "</tdead>" +
            "<tbody>";
          // 渲染周数据
          for (var i = 0; i < weekDates.days.length; i++) {
            var date = weekDates.days[i];
            thisDate = weekDates.days[i];
    
            if (i % 7 === 0) {
              if (weekDataObj.preYear === weekDates.year && weekDataObj.preMonth === weekDates.month && weekDataObj.preStartDay === date.date) {
                html += "<tr class='on' data=" + date.date + "," + (date.date + 6) + ">";
              } else if (todayMonth === date.month && todayDay >= (date.date) && todayDay < (date.date + 6)) {
                html += "<tr class='disabled-tr' data=" + date.date + "," + (date.date + 6) + ">";
              } else if (todayMonth === weekDates.month && todayDay <= (date.date)) {
                html += "<tr class='disabled-tr' data=" + date.date + "," + (date.date + 6) + ">";
              } else {
                html += "<tr data=" + date.date + "," + (date.date + 6) + ">";
              }
    
            }
    
            if (thisDate.date < thisDate.showDate) {
              html += '<td class="notCurMonthDay" data=' + date.date + ">" + date.showDate + "</td>";
            } else if (thisDate.date !== thisDate.showDate) {
              html += '<td class="disabled" data=' + date.date + ">" + date.showDate + "</td>";
            } else if (todayMonth === weekDates.month && todayDay < date.showDate) {
              html += '<td class="disabled" data=' + date.date + ">" + date.showDate + "</td>";
            } else {
              html += "<td data=" + date.date + ">" + date.showDate + "</td>";
    
            }
            if (i % 7 === 6) {
              html += "</tr>";
            }
          }
          html += "</tbody>" + "</table>" + "</div>";
          return html;
        }
      };
    
      datepicker.buildUiMyear = function (obj) {
        obj = {
          year: obj.year,
          rangNum: obj.rangNum ? obj.rangNum : 0,
          oType: obj.oType
        };
        if (obj.oType === "month") {
          monthDate = datepicker.getMonthData(obj.year);
        }
        if (obj.oType === "year") {
          yearDate = datepicker.getYearData(obj.year, obj.rangNum);
        }
        var today = getTodayDate();
    
        if (obj.oType === "month") {
          var html =
            '<div class="ui-datepicker-header" id="ui-datepicker-header">' +
            '<span class="ui-datepicker-btn ui-datepicker-prevbtn" id="prevbtn">&lt;</span>' +
            '<span class="ui-datepicker-btn ui-datepicker-nextbtn" id="nextbtn">&gt;</span>' +
            '<span class="ui-datepicker-curr-month">' +
            monthDate.year +
            "" +
            "</span>";
          html +=
            "</div>" + '<div class="ui-datepicker-body">' + "<table>" + "<tbody>";
          for (var i = 0; i < monthDate.months.length; i++) {
            var date = monthDate.months[i];
            if (i % 4 === 0) {
              html += "<tr>";
            }
    
            if (monthDataObj.flag && today.todayMonth === date) {
              html += "<td data=" + date + ' class="on">' + date + "月</td>";
            } else if (monthDataObj.preYear=== monthDate.year && monthDataObj.preMonth === date) {
              html += "<td data=" + date + ' class="on">' + date + "月</td>";
            } else if (monthDate.year === new Date().getFullYear() && today.todayMonth < date) {
              html += "<td data=" + date + " class='disabled'>" + date + "月</td>";
            } else {
              html += "<td data=" + date + ">" + date + "月</td>";
            }
            if (i % 4 === 3) {
              html += "</tr>";
            }
          }
          html += "</tbody>" + "</table>" + "</div>";
          return html;
        }
        if (obj.oType === "year") {
          var html =
            '<div class="ui-datepicker-header" id="ui-datepicker-header">' +
            '<span class="ui-datepicker-btn ui-datepicker-prevbtn" id="prevbtn">&lt;</span>' +
            '<span class="ui-datepicker-btn ui-datepicker-nextbtn" id="nextbtn">&gt;</span>';
          html += '<span class="ui-datepicker-curr-month">';
          html += yearDate.startYear + "<em>-</em>" + yearDate.endYear;
          html += "</span>";
          html +=
            "</div>" + '<div class="ui-datepicker-body">' + "<table>" + "<tbody>";
          for (var i = 0; i < yearDate.years.length; i++) {
            var date = yearDate.years[i];
            if (i % 4 === 0) {
              html += "<tr>";
            }
    
            if (yearDataObj.flag && today.todayYear === yearDate.years[i]) {
              html += "<td data=" + date + ' class="on">' + date + "</td>";
            } else if (yearDataObj.preYear === yearDate.years[i]) {
              html += "<td data=" + date + ' class="on">' + date + "</td>";
            } else if (today.todayYear < yearDate.years[i]) {
              html += "<td data=" + date + ' class="disabled">' + date + "</td>";
            } else {
              html += "<td data=" + date + ">" + date + "</td>";
            }
            if (i % 4 === 3) {
              html += "</tr>";
            }
          }
    
          html += "</tbody>" + "</table>" + "</div>";
          return html;
        }
      };
    
      datepicker.renderDay = function ($dom, direction) {
        var year, month;
        if (dayDates) {
          year = dayDates.year;
          month = dayDates.month;
        }
        var todayDate = new Date();
        var todayYear = todayDate.getFullYear();
        var todayMonth = todayDate.getMonth() + 1;
        if (direction === "prev") {
          month--;
          if (month === 0) {
            month = 12;
            year--;
          }
        }
        if (direction === "next") {
          if (year === todayYear && month === todayMonth) {
            return;
          }
          month++;
        }
        var html = datepicker.buildUi(year, month, "day");
        if (!$wrapperDay) {
          $wrapperDay = document.createElement("div");
          $wrapperDay.className = "ui-datepicker-wrapper ui-datepicker-day";
          $dom.appendChild($wrapperDay);
        }
        $wrapperDay.innerHTML = html;
      };
      datepicker.renderWeek = function ($dom, direction) {
        var year, month;
        if (weekDates) {
          year = weekDates.year;
          month = weekDates.month;
        }
        var todayDate = new Date();
        var todayYear = todayDate.getFullYear();
        var todayMonth = todayDate.getMonth() + 1;
    
        if (direction === "prev") {
          month--;
          if (month === 0) {
            month = 12;
            year--;
          }
        }
        if (direction === "next") {
          if (month === todayMonth && year === todayYear) {
            return;
          }
          month++;
        }
        var html = datepicker.buildUi(year, month, "week");
    
        if (!$wrapperWeek) {
          $wrapperWeek = document.createElement("div");
          $wrapperWeek.className = "ui-datepicker-wrapper ui-datepicker-week";
          $dom.appendChild($wrapperWeek);
        }
        $wrapperWeek.innerHTML = html;
      };
    
      datepicker.renderMonth = function ($dom, direction) {
        var year;
        if (monthDate) {
          year = monthDate.year;
        }
        if (direction === "prev") {
          year--;
        }
        if (direction === "next") {
          if (year === new Date().getFullYear()) {
            return;
          }
          year++;
        }
    
        var html = datepicker.buildUiMyear({
          year: year,
          oType: "month"
        });
    
        if (!$wrapperMonth) {
          $wrapperMonth = document.createElement("div");
          $wrapperMonth.className = "ui-datepicker-wrapper ui-datepicker-month";
          $dom.appendChild($wrapperMonth);
        }
        $wrapperMonth.innerHTML = html;
      };
    
      datepicker.renderYear = function ($dom, direction) {
        var year,
          rangNum, // 年日期范围
          startYear; // 开始年份
    
        if (yearDate) {
          year = yearDate.year;
          startYear = yearDate.startYear - 1;
          endYear = yearDate.endYear + 1;
        }
    
        if (direction === "prev") {
          if (startYear <= 1999) {
            return;
          }
          rangNum = -10;
        }
        if (direction === "next") {
          if (new Date().getFullYear() <= endYear) {
            return;
          }
          rangNum = 10;
        }
    
        var html = datepicker.buildUiMyear({
          year: year,
          rangNum: rangNum,
          oType: "year"
        });
    
        if (!$wrapperYear) {
          $wrapperYear = document.createElement("div");
          $wrapperYear.className = "ui-datepicker-wrapper ui-datepicker-year";
          $dom.appendChild($wrapperYear);
        }
        $wrapperYear.innerHTML = html;
      };
    
      /** 
       * 初始化日
       * 
       */
      datepicker.initDay = function ($dom, $domIpt, $oParent, fn) {
    
        datepicker.renderDay($dom);
        /*月份切换*/
        $wrapperDay.onclick = function (event) {
          event = event || window.event;
          var target = event.target || event.srcElement;
          /*上一个月*/
          if (dHasClass(target, "ui-datepicker-prevbtn")) {
            datepicker.renderDay($dom, "prev");
          }
          /*下一个月*/
          if (dHasClass(target, "ui-datepicker-nextbtn")) {
            datepicker.renderDay($dom, "next");
          }
          /*获取日期*/
          if (target.tagName.toLowerCase() === "td") {
            var date = new Date(
              dayDates.year,
              dayDates.month - 1,
              target.getAttribute("data")
            );
            var retData = format(date, "day");
            if (target.className !== "disabled") {
    
              $domIpt.value = retData.ret;
              $oParent.style.display = "none";
              dayDataObj = {
                "flag": false,
                "preYear": dayDates.year,
                "preMonth": dayDates.month,
                "preDay": Number(target.getAttribute("data"))
              };
              datepicker.renderDay($dom);
            }
            var obj = {
              type: 'day',
              value: retData.ret,
              realvaule: retData.realret
            }
            if (fn) {
              fn(obj);
            }
          }
        };
      };
    
      /** 
       * 初始化周
       * 
       */
      datepicker.initWeek = function ($dom, $domIpt, $oParent, fn) {
        datepicker.renderWeek($dom);
        /*月份切换*/
        $wrapperWeek.onclick = function (event) {
          event = event || window.event;
          var target = event.target || event.srcElement;
          // 获取tr
          var targetObj = target.parentNode.tagName.toLowerCase();
          // 获取tr class
          var targetPObj = target.parentNode.className;
    
          /*上一个月*/
          if (dHasClass(target, "ui-datepicker-prevbtn")) {
            datepicker.renderWeek($dom, "prev");
    
          }
          /*下一个月*/
          if (dHasClass(target, "ui-datepicker-nextbtn")) {
            datepicker.renderWeek($dom, "next");
          }
          /*获取日期*/
          if (targetObj === "tr") {
            var trData = target.parentNode.getAttribute("data").split(",");
            var datePre = new Date(
              weekDates.year,
              weekDates.month - 1,
              parseInt(trData[0])
            );
            var dateNext = new Date(
              weekDates.year,
              weekDates.month - 1,
              parseInt(trData[1])
            );
            var startDate = format(datePre, "week")
            var endDate = format(dateNext, "week")
            if (targetPObj !== "disabled-tr") {
              $domIpt.value = startDate.ret + "/" + endDate.ret;
              $oParent.style.display = "none";
                weekDataObj = {
                    "flag": false,
                    "preYear": weekDates.year,
                    "preMonth": weekDates.month,
                    "preStartDay": Number(trData[0]),
                    "preEndDay": Number(trData[1])
                };
                datepicker.renderWeek($dom);
            }
    
            var obj = {
              type: 'week',
              value: startDate.ret + "/" + endDate.ret,
              realvaule: [startDate.realret, endDate.realret]
            }
            if (fn) {
              fn(obj);
            }
          }
        };
      };
    
      /** 
       * 初始化月
       * 
       */
      datepicker.initMonth = function ($dom, $domIpt, $oParent, fn) {
        datepicker.renderMonth($dom);
    
        /*月份切换*/
        $wrapperMonth.onclick = function (event) {
          event = event || window.event;
          var target = event.target || event.srcElement;
          /*上一个月*/
          if (dHasClass(target, "ui-datepicker-prevbtn")) {
            datepicker.renderMonth($dom, "prev");
          }
          /*下一个月*/
          if (dHasClass(target, "ui-datepicker-nextbtn")) {
            datepicker.renderMonth($dom, "next");
          }
          /*获取日期*/
          if (target.tagName.toLowerCase() === "td") {
            var date = new Date(
              monthDate.year,
              parseInt(target.getAttribute("data")) - 1
            );
    
            var retData = format(date, "month");
            if (target.className !== "disabled") {
              $domIpt.value = retData.ret;
              $oParent.style.display = "none";
               monthDataObj = {
                  "flag": false,
                  "preYear": monthDate.year,
                  "preMonth": Number(target.getAttribute("data"))
                };
               datepicker.renderMonth($dom);
            }
            var obj = {
              type: 'month',
              value: retData.ret,
              realvaule: retData.realret
            }
            if (fn) {
              fn(obj);
            }
          }
        };
      };
    
      /** 
       * 初始化年
       * 
       */
      datepicker.initYear = function ($dom, $domIpt, $oParent, fn) {
        datepicker.renderYear($dom);
    
        /*月份切换*/
        $wrapperYear.onclick = function (event) {
          event = event || window.event;
          var target = event.target || event.srcElement;
          /*上一个月*/
          if (dHasClass(target, "ui-datepicker-prevbtn")) {
            datepicker.renderYear($dom, "prev");
          }
          /*下一个月*/
          if (dHasClass(target, "ui-datepicker-nextbtn")) {
            datepicker.renderYear($dom, "next");
          }
          /*获取日期*/
          if (target.tagName.toLowerCase() === "td") {
            var date = new Date(
              parseInt(target.getAttribute("data")),
              yearDate.month
            );
            var retData = format(date, "year");
            if (target.className !== "disabled") {
              $domIpt.value = retData.ret;
              $oParent.style.display = "none";
                yearDataObj = {
                  "flag": false,
                  "preYear": Number(target.getAttribute("data")),
                };
                datepicker.renderYear($dom);
            }
            var obj = {
              type: 'year',
              value: retData.ret,
              realvaule: retData.realret
            }
            if (fn) {
              fn(obj);
            }
          }
        };
      };
    
      datepicker.fnTab = function (obj) {
        var oMenu = document.getElementById("ui-datepicker-menu");
        var oMenu_btns = oMenu.getElementsByTagName("span");
        var oWrp = document.getElementById("ui-datepicker-cont");
        var oWrp_boxs = oWrp.getElementsByTagName("section");
    
        for (var i = 0; i < oMenu_btns.length; i++) {
          var oBtn = oMenu_btns[i];
          // 给每个按钮添加一个自定义属性,用来存储当前的索引
          oBtn.index = i;
          oBtn.onclick = function () {
            var index = this.index;
            var indexEle = this;
            if (isEmptyObject(obj)) {
              tabHtmlFn(oMenu_btns, oWrp_boxs, index, indexEle);
            } else {
              if (obj.day && obj.week && obj.month && obj.year) {
                tabHtmlFn(oMenu_btns, oWrp_boxs, index, indexEle);
              } else if (obj.day && obj.week && obj.month && this.index <= 2) {
                tabHtmlFn(oMenu_btns, oWrp_boxs, index, indexEle);
              } else if (obj.day && obj.week && this.index <= 1) {
                tabHtmlFn(oMenu_btns, oWrp_boxs, index, indexEle);
              } else if (obj.day && this.index === 0) {
                tabHtmlFn(oMenu_btns, oWrp_boxs, index, indexEle);
              }
            }
    
          };
        }
      };
    
      /** 
       * 操作的dom
       * 是否将选中的值填入dom
       * 回掉函数返回日期
       */
      datepicker.init = function ($dom, fn, obj) {
        obj = obj || {};
        fn = fn || null;
        // 日期元素
        var $oParent = null;
        var $oPrevbtn,
          $oNextbtn;
        var html = datepicker.buildWrpper();
        if (!$wrpBox) {
          $wrpBox = document.createElement("div");
          $wrpBox.className = "ui-datepicker-wrp";
          $wrpBox.setAttribute("id", "ui-datepicker-wrp");
          document.body.appendChild($wrpBox);
        }
        $wrpBox.innerHTML = html;
        $oParent = document.getElementById("ui-datepicker-wrp");
    
    
        datepicker.initDay(document.getElementById("dayTab"), $dom, $oParent, fn);
        datepicker.initWeek(document.getElementById("weekTab"), $dom, $oParent, fn);
        datepicker.initMonth(document.getElementById("monthTab"), $dom, $oParent, fn);
        datepicker.initYear(document.getElementById("yearTab"), $dom, $oParent, fn);
        datepicker.fnTab(obj);
    
        $dom.onclick = function () {
          $wrpBox.style.top = getOffsetPos($dom).top + $dom.offsetHeight + 3 + "px";
          $wrpBox.style.left = getOffsetPos($dom).left + "px";
          $wrpBox.style.display = "block";
        };
    
        document.onclick = function (event) {
          event = event || window.event;
          var target = event.target || event.srcElement;
          $oPrevbtn = document.getElementById("prevbtn");
          $oNextbtn = document.getElementById("nextbtn");
          $datWrp = document.getElementById("ui-datepicker-wrp");
          var $oMenu = document.getElementById("ui-datepicker-menu");
          var $element = target.tagName.toLowerCase();
    
          if (target === $dom || $datWrp.contains(target) || (target === "td" && target.className === "disabled") || target.getAttribute('id') === 'prevbtn' || target.getAttribute('id') === 'nextbtn') {
            return;
          }
          $oParent.style.display = "none";
    
        };
      };
    
      function getOffsetPos(obj) {
        var top = 0,
          left = 0;
        while (obj.offsetParent !== null) {
          top += obj.offsetTop;
          left += obj.offsetLeft;
          obj = obj.offsetParent;
        }
        return {
          top: top,
          left: left
        };
      }
    
      function dHasClass(obj, className) {
        var reg = new RegExp(className, "g");
        var isHave = reg.test(obj.className);
        return isHave;
      }
    
      function format(date, formt) {
        var padding = function (num) {
          return num <= 9 ? "0" + num : num;
        };
        var ret = "";
        var obj = {};
    
        if (formt === "year") {
          ret += date.getFullYear();
          obj = {
            ret: ret,
            realret: '' + date.getFullYear()
          }
    
        } else {
          ret += date.getFullYear() + "-";
          if (formt === "day" || formt === "week") {
            ret += padding(date.getMonth() + 1) + "-";
            ret += padding(date.getDate());
            if (formt === "day") {
              obj = {
                ret: ret,
                realret: '' + date.getFullYear() + padding(date.getMonth() + 1) + padding(date.getDate())
              }
            }
            if (formt === "week") {
              obj = {
                ret: ret,
                realret: '' + date.getFullYear() + padding(date.getMonth() + 1) + padding(date.getDate())
              }
            }
          }
          if (formt === "month") {
            ret += padding(date.getMonth() + 1);
            obj = {
              ret: ret,
              realret: '' + date.getFullYear() + padding(date.getMonth() + 1)
            }
          }
        }
    
        return obj;
      }
    
      function getTodayDate() {
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDay = today.getDate();
        return {
          todayYear: todayYear,
          todayMonth: todayMonth,
          todayDay: todayDay
        };
      }
      /**
       * 判断对象是否为空
       */
      function isEmptyObject(obj) {
        for (var key in obj) {
          return false;
        }
        return true;
      }
      /**
       * tab选项卡封装
       */
      function tabHtmlFn(oMenu, oWrp, index, indexEle) {
        for (var j = 0; j < oMenu.length; j++) {
          oMenu[j].className = "";
          oWrp[j].style.display = "none";
        }
        indexEle.className = "current";
        oWrp[index].style.display = "block";
      }
    
    
    })();

    具体用法:
    // 初始化时间
    datepicker.init(document.getElementById('dateTxt'), function (data) {

    });
     
  • 相关阅读:
    yum -y install python-devel
    安装xampp之后报错XAMPP: Starting Apache...fail.
    mysql 监控及优化——转载自http://www.cnblogs.com/suansuan/
    jmeter做http请求时报错
    soapui打开即报错------连接不上Internet
    jmeter遇到的问题:java.net.ConnectException: Connection refused: connect
    idea常用设置汇总
    intellij idea参数提示param hints
    intellij高亮字体背景颜色
    idea去除mybatis的xml那个恶心的绿色背景
  • 原文地址:https://www.cnblogs.com/zsongs/p/8692706.html
Copyright © 2011-2022 走看看