js日歷插件很多,但通常是個和輸入框綁定的內聯要單獨啟用.功能豐富點的要帶css或本身文件很大.現自己做個.只需用到jquery和bootstrap(可以改代碼里的字符模板以便用其它風格)
(function($){
var months=[
"一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
];
var tabletpl='<div class="FEdatepicker"><div style="display:inline-block">'
+'<button class="btn btn-sm"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>{0}<button class="btn btn-sm"><span class="glyphicon glyphicon-circle-arrow-right"></span></button>'
+'<button class="btn btn-sm"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>{1}<button class="btn btn-sm"><span class="glyphicon glyphicon-circle-arrow-right"></span></button></div>'
+'<button class="btn btn-sm btn-info pull-right">今天</button>'
+'<table class="table table-responsive table-bordered table-hover">'
+'<thead><tr><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td><td>日</td></tr></thead>'
+'<tbody>{2}</tbody></table></div>';
var formatbody=function(date,curdate){
date=new Date(date.getFullYear(),date.getMonth()+1,0);
var days=date.getDate();
var str="";
var prelens=[6,0,1,2,3,4,5];//如果1號不是禮拜一跳過的單元格
var curday=1;
date=new Date(date.getFullYear(),date.getMonth(),1)
var preday=prelens[date.getDay()];
str+='<tr>';
while(preday--)str+='<td></td>';
var weekday;
var curdateday=new Date(curdate.getFullYear(),curdate.getMonth(),curdate.getDate());
while(curday<=days){
date=new Date(date.getFullYear(),date.getMonth(),curday);
str+=(date.getTime()===curdateday.getTime()?'<td class="danger">':'<td>');
str+=curday+'</td>';
weekday=date.getDay();
if(weekday===0)str+='</tr><tr>';
++curday;
}
if(weekday===0)
return str.substring(0,str.length-4);
else
return str;
}
var formathtml=function(date,curdate){
var list=[""+date.getFullYear(),months[date.getMonth()],formatbody(date,curdate)];
return tabletpl.replace(/\{(\d)\}/g,function(u,i){
return list[+i];
});
}
$.fn.timePicker = function(options) {
var dateNow=new Date();
var defaults={
curdate:dateNow,
showdate:dateNow, callback:function(){}
};
var settings = $.extend({}, defaults, options);
return this.each(function() {
var cur=$(this);
var reshow=function(){
cur.empty();
cur.append(formathtml(settings.showdate,settings.curdate));
}
var changevalue=function(year,plus){
var y=settings.showdate.getFullYear();
var m=settings.showdate.getMonth();
if(year)y+=plus?1:-1;
else {
m+=plus?1:-1;
if(m>11){y+=1;m=0;}
if(m<0){y-=1;m=11;}
}
settings.showdate=new Date(y,m,settings.showdate.getDate());
reshow();
}
var today=function(){
settings.curdate=settings.showdate=new Date();
reshow();
}
var tdclick=function(){
var v=$(this).text();
if(v.length<1)return;
var newDate=new Date(settings.showdate.getFullYear(),settings.showdate.getMonth(),+v);
settings.callback(newDate);//僅當點了單元格中日期才回調并設置選中日期
settings.curdate=settings.showdate=newDate;
reshow();
}
reshow();
cur.off("click");
cur.on("click",".FEdatepicker div button",function(){
var index=$(this).index();
changevalue(index<2?true:false,index%2?true:false);
});
cur.on("click",".FEdatepicker button:eq(4)",today);
cur.on("click",".FEdatepicker table tbody td",tdclick);
});
};
})(jQuery);