JSFiddle - React, Tailwind, and code Playground

by dtdxrk

HTML

<ul id="txt">
    <li>以前一直在用Jquery的日期控件，慢慢的需求增多了，修改别人的很头疼，但是网站上放2个以上同功能的控件又不和谐，所以决定自己写一个。
照着淘宝的样式做了一个，目前实现了几种形态：</li>
    <li>1.单月/双月的显示</li>
    <li>2.年月是否可选</li>
    <li>3.今日以前的日期是否可选</li>
    <li>4.兼容ie/ff/chrome</li>
  </ul>


<div style="margin-top:200px;margin-left:400px;">
入住时间<input type="text" class="input_Calendar" id="inDate" name="inDate" readOnly="true" value=""><br><br>
离店时间<input type="text" class="input_Calendar" id="outDate" name="outDate" readOnly="true" value="">
<p>
<br>
<select name="IE6">
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select></p>
</div>

其他时间<input type="text" class="input_Calendar" id="Date" name="Date" readOnly="true" value="">

CSS

*{margin:0;padding: 0; }

  #txt {background-color: green;padding: 5px;line-height: 1.5;color: #fff;}

  /*日历控件*/
  input.input_Calendar, .div_Calendar button{ background: url(http://images.cnblogs.com/cnblogs_com/dtdxrk/485636/o_Calendar_bg.gif) no-repeat;}
  
  .div_Calendar{display:none;z-index: 9999; overflow: hidden; font-size: 13px;padding:0 25px;_padding-bottom:15px;width:auto;box-shadow: 2px 2px 3px rgba(0,0,0,0.3);font-family: Arial; position: absolute;border:1px solid #ccc; background-color: #fff;}
  .div_Calendar div.div_Month{margin:15px;float: left;_display:inline;}
  .div_Calendar div.double{margin-left: 0;}
  .div_Calendar div.div_Month h1{text-align: center;font-size: 13px;line-height: 1;margin-bottom: 5px;}
  .div_Calendar div.div_Month table, .div_Calendar div.div_Month table th,.div_Calendar div.div_Month table td{border-collapse: collapse;}
  .div_Calendar div.div_Month table{border-top:1px solid #DCDCDC;text-align: center;}
  .div_Calendar div.div_Month table th{font-weight: normal;padding: 2px 5px;}
  .div_Calendar div.div_Month table td{border:1px solid #DCDCDC;}
  .div_Calendar div.div_Month table td span{padding: 2px 5px;color: #ccc; cursor:default ;display: block;}
  .div_Calendar div.div_Month table td a{ text-decoration: none;color: #000; display: block;padding: 2px 5px;font-weight: bold;cursor: pointer;}
  .div_Calendar div.div_Month table td a:hover{color: #fff;background-color: #5792dc; }
  .div_Calendar div.div_Month table td a.active,.div_Calendar div.div_Month table td a.on{background-color:#5792dc;color: #fff;}
  .div_Calendar button{position: absolute;padding: 5px 2px;border:0;cursor: pointer;text-indent: -9999px; }
  .div_Calendar button.m_prev{left:10px;top:75px;width: 20px;height: 38px;}
  .div_Calendar button.m_next{right: 10px;top:75px;background-position: -20px 0;width: 20px;height: 38px;}
  .div_Calendar button.c_close{ right: 5px;top: 5px;width: 17px;height: 17px;background-position: -40px 0;}

  input.input_Calendar{
 ...

JavaScript

var _CalF = {
  $ : function(object){//选择器
    if(object === undefined ) return;
    var getArr = function(name,tagName,attr){
          var tagName = tagName || '*',
              eles = document.getElementsByTagName(tagName),
              clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
              attr = attr || clas,
              Arr = [];
          for(var i=0;i<eles.length;i++){
            if(eles[i].getAttribute(attr)==name){
              Arr.push(eles[i]);
            }
          }
          return Arr;
        };
  
    if(object.indexOf('#') === 0){  //#id 
      return document.getElementById(object.substring(1));
    }else if(object.indexOf('.') === 0){  //.class
      return getArr(object.substring(1));
    }else if(object.match(/=/g)){  //attr=name
      return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
    }else if(object.match(/./g)){ //tagName.className
      return getArr(object.split('.')[1],object.split('.')[0]);
    }
  },
  addHandler:function(node, type, handler){
      node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);
  },
  removeHandler: function (node, type, handler) {
      node.removeEventListener ? node.removeEventListener(type, handler, false) : node.detachEvent("on" + type, handler);
  },
  getPosition : function(obj) { //获取元素在页面里的位置和宽高
     var top = 0,
         left = 0,
         width = obj.offsetWidth,
         height = obj.offsetHeight;
 
     while(obj.offsetParent){
         top += obj.offsetTop;
         left += obj.offsetLeft;
         obj = obj.offsetParent;
     }
 
     return {"top":top,"left":left,"width":width,"height":height};
  },
  addClass:function(c,node){  // 添加样式名
      node.className = node.className + ' ' + c;
  },
  removeClass:function(c,node){ // 移除样式名
      var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)","g");
      node.className =...