點選文字框下拉彈出日曆控制元件程式碼

螞蟻小編發表於2017-03-16
控制元件

大家可能都遇到過這樣的情況，在需要填寫時間日期的地方，只要點選一下文字框，就會下拉彈出一個空間，可以方便的選擇時間和日期，這樣可以避免了填寫日期的操作或者說對於時間格式的要求。下面是一段這樣的例項程式碼，希望能夠給需要的朋友帶來一定的幫助。程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.date-picker-wp 
{
  display:none;
  position:absolute;
  background:#f1f1f1;
  left:40px;
  top:40px;
  border-top:4px solid #3879d9;
}
.date-picker-wp table{border:1px solid #ddd;}
.date-picker-wp td 
{
  background:#fafafa;
  width:22px;
  height:18px;
  border:1px solid #ccc;
  font-size:12px;
  text-align:center;
}
.date-picker-wp td.noborder 
{
  border:none;
  background:none;
}
.date-picker-wp td a 
{
  color:#1c93c4;
  text-decoration:none;
}
.strong{font-weight: bold}
.hand 
{
  cursor:pointer;
  color:#3879d9
}
</style>
<script type="text/javascript"> 
var DatePicker=function(){ 
  var $=function (i){ 
    return document.getElementById(i) 
  }, 
  addEvent=function(o,e,f){
    o.addEventListener?o.addEventListener(e,f,false):o.attachEvent('on'+e,function(){f.call(o)})}, 
    getPos=function(el){ 
    for(var pos={x:0, y:0}; el; el = el.offsetParent)
        { 
      pos.x += el.offsetLeft; 
      pos.y += el.offsetTop; 
    } 
    return pos; 
  }; 
  var init = function (n, config){ 
    window[n] = this; 
    Date.prototype._fd = function () {
          var d = new Date(this); 
          d.setDate(1); 
          return d.getDay()
        }; 
    Date.prototype._fc = function () {
          var d1 = new Date(this), d2 = new Date(this); d1.setDate(1); 
          d2.setDate(1); 
          d2.setMonth(d2.getMonth()+1); 
          return (d2-d1)/86400000;
        }; 
    this.n = n; 
    this.config = config; 
    this.D = new Date; 
    this.el = $(config.inputId); 
    this.el.title = this.n+'DatePicker'; 
    this.update(); 
    this.bind(); 
  }; 
  init.prototype = { 
    update : function (y, m) { 
    var con = [], week = ['Su','Mo','Tu','We','Th','Fr','Sa'], D = this.D, _this = this; 
    fn = function (a, b) {
          return '<td title="'+_this.n+'DatePicker" class="noborder hand">'+b+'</td>'}, 
      _html = '<table cellpadding=0 cellspacing=2>'; 
      y && D.setYear(D.getFullYear() + y); 
      m && D.setMonth(D.getMonth() + m); 
      var year = D.getFullYear(), month = D.getMonth() + 1, date = D.getDate(); 
      for (var i=0; i<week.length; i++) 
          con.push('<td title="'+this.n+'DatePicker" class="noborder">'+week[i]+'</td>'); 
      for (var i=0; i<D._fd(); i++ ) 
          con.push('<td title="'+this.n+'DatePicker" class="noborder"> </td>'); 
      for (var i=0; i<D._fc(); i++ ) 
          con.push('<td class="hand">'+(i+1)+'</td>'); 
      var toend = con.length%7; 
      if (toend != 0) for (var i=0; i<7-toend; i++) 
          con.push('<td class="noborder"> </td>'); 
      _html += '<tr>'+fn("-1, null", "<<")+
          fn("null, -1", "<")+'<td title="'+this.n+'DatePicker" colspan=3 class="strong">'+
          year+'/'+month+'/'+date+'</td>'+fn("null, 1", ">")+
          fn("1, null", ">>")+'</tr>'; 
      for (var i=0; i<con.length; i++) 
          _html += (i==0 ? '<tr>' : i%7==0 ? '</tr><tr>' : '') + con[i] + (i == con.length-1 ? '</tr>' : ''); 
      !!this.box ? this.box.innerHTML = _html : this.createBox(_html); 
    }, 
    fillInput : function (y, m, d) { 
      var s = this.config.seprator || '/'; 
      this.el.value = y + s + m + s + d; 
      this.box.style.display = 'none'; 
    }, 
    show : function(){ 
      var s = this.box.style, is = this.mask.style; 
      s['left'] = is['left'] = getPos(this.el).x + 'px'; 
      s['top'] = is['top'] = getPos(this.el).y + this.el.offsetHeight + 'px'; 
      s['display'] = is['display'] = 'block'; 
      is['width'] = this.box.offsetWidth - 2 + 'px'; 
      is['height'] = this.box.offsetHeight - 2 + 'px'; 
    }, 
    hide : function () { 
      this.box.style.display = 'none'; 
      this.mask.style.display = 'none'; 
    }, 
    bind : function () { 
      var _this = this; 
      addEvent(document, 'click', function (e) { 
        e = e || window.event; 
        var t = e.target || e.srcElement; 
        if (t.title != _this.n+'DatePicker') 
                {_this.hide()} else {_this.show()} 
      }); 
    }, 
    createBox : function (html){ 
      var box = this.box = document.createElement('div'), 
          mask = this.mask = document.createElement('iframe'); 
      box.className = this.config.className || 'datepicker'; 
      mask.src = 'javascript:false'; 
      mask.frameBorder = 0; 
      box.style.cssText = 'position:absolute;display:none;z-index:9999'; 
      mask.style.cssText = 'position:absolute;display:none;z-index:9998'; 
      box.title = this.n+'DatePicker'; 
      box.innerHTML = html; 
      document.body.appendChild(box); 
      document.body.appendChild(mask); 
      return box; 
    } 
  }; 
  return init; 
}(); 
onload = function () { 
  new DatePicker('_DatePicker_demo', { 
    inputId: 'date-input', 
    className: 'date-picker-wp', 
    seprator: '-' 
  }); 
} 
</script>
</head>
<body bgcolor="#FFFFDB">
<form >
  <table border="0" width="60%" align="center">
    <tr>
      <td width="45%" class="wr4" align="right"> 生日：</td>
      <td width="55%" class="wr4"><input type="text" name="mtime" id="date-input">
        <font color="RED">*</font></td>
    </tr>
    <tr>
      <td width="45%" align="right"><input type = "submit" value = "確定"/></td>
      <td width="55%"><input type = "reset" value = "重置"/></td>
    </tr>
  </table>
</form>
</body>
</html>

相關文章