<div class='data_box'id='data_box'>
<input type='text'class='showDate' value='点击选择日期' />
<div class='sel_date dn'>
<div class='clearfix'>
<span class='prev_y fl'><<</span><span class='prev_m fl'><</span>
<span class='next_y fr'>>></span><span class='next_m fr'>></span>
<div class='show_mn'>
<input disabled type='text' class='showDate2 year' value='选择年份' />
<span class='ml5 mr5'>年</span>
<input disabled type='text' class='showDate2 month' value='选择月份' />
<span class='ml5'>月</span>
</div>
</div>
<table class='data_table'>
<thead>
<tr>
<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
</tr>
</thead>
<tbody id='tbody'>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>
</div>
</div>
* {padding:0;margin:0;font-size:12px;}
.fl {float:left}
.fr {float:right}
.dn {display:none}
/* begin*/
.data_box {width:260px; }
.showDate {width:248px;height:30px;line-height:30px;padding:0 5px;border:1px solid #e1e1e1;color:#999;display:block;cursor:pointer}
.show_mn {text-align:center;padding:0 20px;}
.sel_date {margin-top:10px;border:1px solid #999;padding:3px}
.data_table {width:100%;margin-top:10px;}
.data_table td {text-align:center;cursor:pointer;height:24px;font-size:14px;}
.data_table td.active{color:#fff;background-color:#999}
.data_table td.hover{color:blue;}
.showDate2 {width:35px;padding:3px 5px;color:#999;border:1px solid #e1e1e1;text-align:center}
.showDate2.active {border:1px solid #c50000; }
.prev_m,.next_m {width:10px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px'}
.prev_y,.next_y {width:18px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px';margin:0 5px;}
function getclass(parent,classname){
var tags=parent.getElementsByTagName('*');
var temp=[];
for(var i=0;i<tags.length;i++){
if(tags[i].className.match(new RegExp('(^|\\s+)' + classname + '(\\s+|$)'))){
temp.push(tags[i]);
}
}
return temp;
}
function showDate(option){
this.obj=document.getElementById(option.id);
}
showDate.prototype.init= function () {
var _self=this;
this.dateText=getclass(_self.obj,'showDate')[0];
this.dateBox=getclass(_self.obj,'sel_date')[0];
this.yearBox =getclass(_self.obj, 'year')[0];
this.mnBox = getclass(_self.obj, 'month')[0];
//td beblow the tbody
this.td=document.getElementById('tbody').getElementsByTagName('td');
this.prevM=getclass(this.dateBox,'prev_m')[0];
this.prevY=getclass(this.dateBox,'prev_y')[0];
this.nextM=getclass(this.dateBox,'next_m')[0];
this.nextY=getclass(this.dateBox,'next_y')[0];
//add clickEvent for four button to choose month and year
this.prevM.onclick= function () {
var month=_self.mnBox.value;
var year=_self.yearBox.value;
if(month>1){
_self.mnBox.value=--month;
}else{
_self.yearBox.value=--year;
_self.mnBox.value=12;
}
}
this.nextM.onclick= function () {
var month=_self.mnBox.value;
var year=_self.yearBox.value;
if(month<12){
_self.mnBox.value=++month;
}else{
_self.yearBox.value=++year;
_self.mnBox.value=1;
}
}
this.prevY.onclick= function () {
var year=_self.yearBox.value;
_self.yearBox.value=--year;
}
this.nextY.onclick= function () {
var year=_self.yearBox.value;
_self.yearBox.value=++year;
}
//click to show calen
this.dateText.onfocus= function () {
_self.clearDefault(this);
_self.show();
_self.showNow();
}
//onblur when set defalut
this.dateText.onblur= function () {
_self.setDefault(this);
}
}
//clear the DefaultValue
showDate.prototype.clearDefault= function (obj) {
var deVal=obj.defaultValue;
if(obj.value==deVal){
obj.value='';
}
}
//set the DefaultValue if there is nothing
showDate.prototype.setDefault= function (obj) {
var deVal=obj.defaultValue;
if(obj.value==''){
obj.value=deVal;
}
}
showDate.prototype.show= function () {
if(this.dateBox.className.match('dn')){
this.dateBox.className=this.dateBox.className.replace('dn','')
}
}
showDate.prototype.showNow= function () {
//show year and month
var now=new Date();
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
this.yearBox.value=year;
this.mnBox.value=month;
//show days
var first = new Date(year, month - 1, 1);
var firstDay=first.getDay();
var arr31 = [1, 3, 5, 7, 8, 10, 12];
var day;
var _self=this;
if(arr31.indexOf(month.toString())){
day=31;
}else if(month==2){
if((year%4==0 && year%100!=0)||(year%400==0)){
day=29;
}else{
day=28;
}
}else{
day=30;
}
for (var i = 0,len=_self.td.length; i <len; i++) {
_self.td[i].innerHTML = '';
_self.td[i].className = _self.td[i].className.replace('active', '');
}
for(var j= 0,len=day;j<len;j++){
this.td[firstDay+j].innerHTML=j+1;
if(j+1==date && this.td[firstDay+j].className.indexOf('active')==-1){
_self.td[j + firstDay].className += ' ';
_self.td[j + firstDay].className += 'active';
}
}
this.dateBox.onclick= function (event) {
var e=event || window.event;
var target= e.srcElement? e.srcElement: e.target;
var year=_self.yearBox.value;
var month=_self.mnBox.value;
for (var i = 0,len=_self.td.length; i <len; i++) {
_self.td[i].className = _self.td[i].className.replace('active', '');
}
target.className+=' '+'active';
if(typeof parseInt(target.innerHTML)=='number' && target.innerHTML!=='' && isNaN(target.innerHTML)==false){
console.log(parseInt(target.innerHTML));
_self.dateText.value=year+' 年 '+month+' 月 '+target.innerHTML+' 日';
_self.dateBox.className+=' '+'dn';
}
}
}
window.onload= function () {
var showDate1=new showDate({id:'data_box'});
showDate1.init();
}
浙公网安备 33010602011771号