自定义日期控件

deepCode
130 阅读1分钟 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>date</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      outline: none;
    }

    body a {
      outline: none;
      /* blr: expression(this.onFocus=this.blur()); */
    }

    img {
      border: none;
    }

    ul {
      list-style: none;
    }

    body {
      color: #666666;
      font-size: 14px;
      font-family: "微软雅黑";
      background-color: #fff;
      height: 100%;
      overflow-y: scroll;
      *overflow-y: inherit;
    }

    /*html{ height:100%;}*/
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      overflow: hidden;
    }

    .clearfix {
      zoom: 1;
    }

    #box {
      width: 350px;
      position: absolute;
    }

    #title {
      width: 350px;
      height: 20px;
    }

    #month {
      float: left;
      width: 60px;
      height: 50px;
      text-align: center;
      cursor: pointer;
      line-height: 50px;
    }

    /* 年 */
    #year {
      float: left;
      width: 80px;
      height: 50px;
      text-align: center;
      cursor: pointer;
      line-height: 50px;
    }

    /* 周 */
    #week {
      width: 350px;
      height: 50px;
    }

    #week div {
      float: left;
      width: 48px;
      height: 48px;
      margin: 1px;
      background: #3ff;
      color: #000;
      text-align: center;
      line-height: 48px;
      cursor: pointer;
    }

    /* 空白 */
    #con {
      width: 350px;
    }

    #con div {
      float: left;
      width: 48px;
      height: 48px;
      margin: 1px;
      background: #fff;
      color: #333;
      text-align: center;
      line-height: 48px;
      cursor: pointer;
    }

    /* 日 */
    #con .edate {
      background: rgb(0, 119, 255);
      color: #fff;
    }

    #con .edate:hover {
      background: #3ff;
      color: #000;
    }

    /* 当前日期 */
    #con div.now {
      background: #f00;
      color: #fff;
    }

    #prevmonth,
    #nextmonth,
    #prevyear,
    #nextyear {
      float: left;
      width: 50px;
      height: 50px;
      text-align: center;
      cursor: pointer;
      line-height: 50px;
    }

    /* 两个按钮区域 */
    #btns {
      width: 350px;
      height: 40px;
    }

    /* 当前时间 */
    #nowtime {
      float: left;
      margin: 5px;
      height: 30px;
      line-height: 30px;
      padding: 0 5px;
      background: greenyellow;
      color: #000;
      cursor: pointer;
      border-radius: 5px;
    }

    #nowtime:hover {
      background: #3ff;
    }

    #cleartime {
      float: left;
      margin: 5px;
      height: 30px;
      line-height: 30px;
      padding: 0 5px;
      background: greenyellow;
      color: #000;
      cursor: pointer;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <p style=" margin:100px;">选择日期：<input type="text" id="date" value="" style="height:40px; line-height:40px;" /></p>
</body>
<script type="text/javascript">
  window.onload = function () {
    //创建日历控件基本结构 
    var obody = document.body;
    createbox();
    function createbox() {
      var ddbox = document.createElement("div");
      ddbox.id = "box";
      ddbox.style.display = "none";
      var str = "";
      str += '<div id="title"><div id="prevyear"><<</div><div id="prevmonth"><</div><div id="month"></div><div id="year"></div><div id="nextmonth">></div><div id="nextyear">>></div></div>';
      str += '<div id="week"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>';
      str += '<div id="con" class="clearfix"></div>';
      str += '<div id="btns"><div id="nowtime">当前时间</div><div id="cleartime">清空</div></div>';
      ddbox.innerHTML = str;
      obody.appendChild(ddbox);
    };
    //===================get ele=============================== 
    var omonth = document.getElementById("month");
    var oyear = document.getElementById("year");
    var con = document.getElementById("con");
    var prevmonth = document.getElementById("prevmonth");
    var nextmonth = document.getElementById("nextmonth");
    var prevyear = document.getElementById("prevyear");
    var nextyear = document.getElementById("nextyear");
    var nowtime = document.getElementById("nowtime");
    var date = document.getElementById("date");
    var box = document.getElementById("box");
    var cleartime = document.getElementById("cleartime");
    //===================show date===============================
    date.onfocus = function () {//显示控件
      var datel = this.getBoundingClientRect().left;
      var datet = this.getBoundingClientRect().top + 40;
      box.style.left = datel + "px";
      box.style.top = datet + "px";
      box.style.display = "block";
    };
    con.onclick = function (event) {
      if (event.target.tagName == "DIV" && event.target.nodeType == "1" && hasclass(event.target.className, "edate")) {
        date.value = "";
        date.value = dateObj.getFullYear() + "-" + toyear(dateObj) + "-" + event.target.innerHTML;
        box.style.display = "none";
      };
    };
    cleartime.onclick = function (event) {
      date.value = "";
    };
    //===================set year month===============================
    //默认时间对象
    var dateObj = new Date();
    //动态控制
    prevmonth.onclick = function () {//上一月
      var ddm = null;
      var ddy = null;
      if ((dateObj.getMonth() - 1) == -1) {
        ddm = 11;
        ddy = dateObj.getFullYear() - 1;
      } else {
        ddm = dateObj.getMonth() - 1;
        ddy = dateObj.getFullYear();
      };
      dateObj.setFullYear(ddy);
      dateObj.setMonth(ddm);
      omonth.innerHTML = toyear(dateObj) + "月";
      oyear.innerHTML = dateObj.getFullYear() + "年";
      remove();
      oneweek = oneyearoneday(dateObj);
      alld = alldays(dateObj);
      nowd = nowday(dateObj);
      init(oneweek, alld, nowd);
    };
    nextmonth.onclick = function () {//下一月
      var ddm = null;
      var ddy = null;
      if ((dateObj.getMonth() + 1) == 12) {
        ddm = 0;
        ddy = dateObj.getFullYear() + 1;
      } else {
        ddm = dateObj.getMonth() + 1;
        ddy = dateObj.getFullYear();
      };
      dateObj.setFullYear(ddy);
      dateObj.setMonth(ddm);
      omonth.innerHTML = toyear(dateObj) + "月";
      oyear.innerHTML = dateObj.getFullYear() + "年";
      remove();
      oneweek = oneyearoneday(dateObj);
      alld = alldays(dateObj);
      nowd = nowday(dateObj);
      init(oneweek, alld, nowd);
    };
    prevyear.onclick = function () {//上一年
      var ddy = dateObj.getFullYear() - 1;
      dateObj.setFullYear(ddy);
      oyear.innerHTML = dateObj.getFullYear() + "年";
      remove();
      oneweek = oneyearoneday(dateObj);
      alld = alldays(dateObj);
      nowd = nowday(dateObj);
      init(oneweek, alld, nowd);
    };
    nextyear.onclick = function () {//下一年
      var ddy = dateObj.getFullYear() + 1;
      dateObj.setFullYear(ddy);
      oyear.innerHTML = dateObj.getFullYear() + "年";
      remove();
      oneweek = oneyearoneday(dateObj);
      alld = alldays(dateObj);
      nowd = nowday(dateObj);
      init(oneweek, alld, nowd);
    };
    //返回到今时今日
    nowtime.onclick = function () {
      var dddate = new Date();
      var ddm = dddate.getMonth();
      var ddy = dddate.getFullYear();
      dateObj.setFullYear(ddy);
      dateObj.setMonth(ddm);
      omonth.innerHTML = toyear(dateObj) + "月";
      oyear.innerHTML = dateObj.getFullYear() + "年";
      remove();
      oneweek = oneyearoneday(dateObj);
      alld = alldays(dateObj);
      nowd = nowday(dateObj);
      init(oneweek, alld, nowd);
    };
    //年月获取 
    var year = dateObj.getFullYear();
    var month = toyear(dateObj);//0是12月
    //月年的显示
    omonth.innerHTML = month + "月";
    oyear.innerHTML = year + "年";
    //===================set day===============================
    //获取本月1号的周值
    var oneweek = oneyearoneday(dateObj);
    //本月总日数
    var alld = alldays(dateObj);
    //当前是几
    var nowd = nowday(dateObj);
    //初始化显示本月信息
    init(oneweek, alld, nowd);
    //===================function===============================
    //有无指定类名的判断
    function hasclass(str, cla) {
      var i = str.search(cla);
      if (i == -1) {
        return false;
      } else {
        return true;
      };
    };
    //初始化日期显示方法
    function remove() {
      con.innerHTML = "";
    };
    function init(oneweek, alld, nowd) {
      for (var i = 1; i <= oneweek; i++) {//留空
        var eday = document.createElement("div");
        eday.innerHTML = "";
        con.appendChild(eday);
      };
      for (var i = 1; i <= alld; i++) {//正常区域
        var eday = document.createElement("div");
        if (i == nowd) {
          eday.innerHTML = i;
          eday.className = "now edate";
          con.appendChild(eday);
        } else {
          eday.innerHTML = i;
          eday.className = "edate";
          con.appendChild(eday);
        };
      };
    };
    //获取本月1号的周值
    function oneyearoneday(dateObj) {
      var oneyear = new Date();
      var year = dateObj.getFullYear();
      var month = dateObj.getMonth();//0是12月
      oneyear.setFullYear(year);
      oneyear.setMonth(month);//0是12月
      oneyear.setDate(1);
      return oneyear.getDay();
    };
    //当前是几
    function nowday(dateObj) {
      return dateObj.getDate();
    };
    //获取本月总日数方法
    function alldays(dateObj) {
      var year = dateObj.getFullYear();
      var month = dateObj.getMonth();
      if (isLeapYear(year)) {//闰年
        switch (month) {
          case 0: return "31"; break;
          case 1: return "29"; break; //2月
          case 2: return "31"; break;
          case 3: return "30"; break;
          case 4: return "31"; break;
          case 5: return "30"; break;
          case 6: return "31"; break;
          case 7: return "31"; break;
          case 8: return "30"; break;
          case 9: return "31"; break;
          case 10: return "30"; break;
          case 11: return "31"; break;
          default:
        };
      } else {//平年
        switch (month) {
          case 0: return "31"; break;
          case 1: return "28"; break; //2月 
          case 2: return "31"; break;
          case 3: return "30"; break;
          case 4: return "31"; break;
          case 5: return "30"; break;
          case 6: return "31"; break;
          case 7: return "31"; break;
          case 8: return "30"; break;
          case 9: return "31"; break;
          case 10: return "30"; break;
          case 11: return "31"; break;
          default:
        };
      };
    };
    //闰年判断函数
    function isLeapYear(year) {
      if ((year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)) {
        return true;
      } else {
        return false;
      };
    };
    //月份转化方法
    function toyear(dateObj) {
      var month = dateObj.getMonth()
      switch (month) {
        case 0: return "1"; break;
        case 1: return "2"; break;
        case 2: return "3"; break;
        case 3: return "4"; break;
        case 4: return "5"; break;
        case 5: return "6"; break;
        case 6: return "7"; break;
        case 7: return "8"; break;
        case 8: return "9"; break;
        case 9: return "10"; break;
        case 10: return "11"; break;
        case 11: return "12"; break;
        default:
      };
    };
  };
</script>

</html>
avatar
文章
阅读
粉丝