日期:2014-05-16 浏览次数:21725 次
展示:
js 代码:
?
Zepto.datepicker = function(target){ var datepicker = { init : function(){ this._target = target; this._date = new Date(); this._formatDate(); }, bind: function(){ this._picker = (function(){ var arr = []; arr.push('<div class="datepicker-box">'); arr.push(' <div class="datepicker-header">'); arr.push(' <span class="datepicker-pre"><b></b></span>'); arr.push(' <span class="datepicker-next"><b></b></span>'); arr.push(' <h4></h4>'); arr.push(' </div>'); arr.push(' <table class="datepicker-body">'); arr.push(' <thead>'); arr.push(' <tr>'); arr.push(' <th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th class="datepicker-weekend">六</th><th class="datepicker-weekend">日</th>'); arr.push(' </tr>'); arr.push(' </thead>'); arr.push(' <tbody>'); arr.push(' </tbody>'); arr.push(' </table>'); arr.push('</div>'); return $(arr.join('')); })(); this._generateDays(); var p = this; this._picker.find('span').on('touchstart', function(){ $(this).addClass('hover'); }).on('touchend', function(){ $(this).removeClass('hover'); }).click(function(){ if($(this).hasClass('datepicker-pre')){ p._date.setMonth(p._date.getMonth() - 1); } else { p._date.setMonth(p._date.getMonth() + 1); } p._generateDays(); }); this._picker.click(function(e){ e.preventDefault(); e.stopPropagation(); }); $(document).click(function(e){ if(e.target != p._picker[0] && e.target != p._target[0]){ p._picker.hide(); } }); return this; }, insert : function(){ this._picker.insertAfter(this._target); }, show : function(){ this._picker.show(); }, hide : function(){ this._picker.hide(); }, _generateDays : function(){ var year = this._date.getFullYear() , month = this._date.getMonth() + 1 , day = this._date.getDate() , days = new Date(new Date(year, month, 1) - 24*60*60*1000).getDate() , week = (function(){ var tDate = new Date(year, month-1, 1); var week = tDate.getDay(); if(week == 0){ week = 7; } return week; })(); this._picker.find('h4').html(year + ' 年 ' + month + ' 月'); var arr = [] , d = 1; arr.push('<tr>'); for(var j = 1; j < week; j ++){ arr.push('<td> </td>'); } for(var j = week; j < 8; j ++, d ++){ arr.push('<td class="datepicker-td'); if(d == day){ arr.push(' cur'); } if(j >= 6){ arr.push(' datepicker-weekend'); } arr.push('">'); arr.push(d); arr.push('</td>'); } arr.push('</tr>'); for(var i = 0, l = Math.ceil((days + week) / 7) - 2; i < l; i ++){ arr.push('<tr>'); for(var j = 1; j < 8; j ++, d ++){ arr.push('<td class="datepicker-td'); if(d == day){ arr.push(' cur'); } if(j >= 6){ arr.push(' datepicker-weekend'); } arr.push('">'); arr.push(d); arr.push('</td>'); } arr.push('</tr>'); } var l = days - d + 1; if(l != 0){ arr.push('<tr>'); for(var i = 0; i < l; i ++, d ++){ arr.push('<td class="datepicker-td'); if(d == day){ arr.push(' cur'); } if(i >= 6){ arr.push(' datepicker-weekend'); } arr.push('">'); arr.push(d); arr.push('</td>'); } for(var i = l + 1; i < 8; i ++){ arr.push('<td>&