日期控件，可任意设置日期、时间格式。如图所示（png图片有色差，实际效果更佳）：
----------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------
html代码如下(支持时间到时分，不支持时间到秒，使用前务必导入js文件)：
javascript如下(建议另外新建js文件)：
// ***** 变量定义 ****** //
var YearSt = 1950; //可选择的开始年份
var YearEnd = 2050; //可选择的结束年份
var dateFomat;
var inputObj;
var DateSplit = "-"; //日期的分隔符号
var DateTimeSplit = " "; //日期与时间的分隔符
var TimeSplit = ":"; //时间的分隔符号
var isShowTime = "display:none";//是否显示时间
// ***** 控件界面 ****** //
function HS_calender(){
var style = "";
style +="";
var h="0",m="0";//时间
var thisDate;
if (typeof(arguments[0])=="string"){
var DateValueTemp = inputObj.value.replace(DateSplit, "").replace(DateSplit, "").replace(DateSplit, "").replace(DateTimeSplit, "").replace(TimeSplit, "");
var year = DateValueTemp.substr(0,4);
var month = parseInt(DateValueTemp.substr(4,2))-1+"";
var date = DateValueTemp.substr(6,2); //alert(year+" "+month+" "+date);
if(DateValueTemp.substr(8,2).toString().length>0) {h=DateValueTemp.substr(8,2);}
if(DateValueTemp.substr(10,2).toString().length>0){m=DateValueTemp.substr(10,2);}
thisDate = new Date(year,month,date);
thisDate.setHours(parseInt(h), parseInt(m));
}else if (typeof(arguments[0])=="object"){
thisDate = arguments[0];
}
var lastMonthEndDate = HS_DateAdd("d","-1",thisDate.getFullYear()+"-"+thisDate.getMonth()+"-01").getDate();
var lastMonthDate = WeekDay(thisDate.getFullYear()+"-"+thisDate.getMonth()+"-01");
var thisMonthLastDate = HS_DateAdd("d","-1",thisDate.getFullYear()+"-"+(parseInt(thisDate.getMonth())+1).toString()+"-01");
var thisMonthEndDate = thisMonthLastDate.getDate();
var thisMonthEndDay = thisMonthLastDate.getDay();
var thisDateString = thisDate.getFullYear()+"-"+thisDate.getMonth()+"-"+thisDate.getDate();
var CalenderTitle = "\";
CalenderTitle += ""+thisDate.getFullYear()+"年"
CalenderTitle += "";
CalenderTitle += ""+(parseInt(thisDate.getMonth())+1)+"月 ";
CalenderTitle += "";
CalenderTitle += ""+(parseInt(thisDate.getHours()))+"时 ";
CalenderTitle += "";
CalenderTitle += ""+0+"分 ";
CalenderTitle += "";
CalenderTitle += "
";
CalenderTitle += "年↑ ";
CalenderTitle += "年↓ ";
CalenderTitle += "月↑ ";
CalenderTitle += "月↓";
var lis = "";
for (i=0; i" + lis;
lastMonthEndDate--;
}
for (i=1; i<=thisMonthEndDate; i++){ // Current Month's Date
if(thisDateString == thisDate.getFullYear()+"-"+thisDate.getMonth()+"-"+i){
var momth_length=(parseInt(thisDate.getMonth())+1).toString();
if(momth_length.length=="1" && i<10){
lis += ""+i+"";
}else if(momth_length.length=="1" && i>9){
lis += ""+i+"";
}else if(momth_length.length=="2" && i<10){
lis += ""+i+"";
}else if(momth_length.length=="2" && i>9){
lis += ""+i+"";
}
}else{
var momth_length=(parseInt(thisDate.getMonth())+1).toString();
if(momth_length.length=="1" && i<10){
lis += ""+i+"";
}else if(momth_length.length=="1" && i>9){
lis += ""+i+"";
}else if(momth_length.length=="2" && i<10){
lis += ""+i+"";
}else if(momth_length.length=="2" && i>9){
lis += ""+i+"";
}
}
}
var j=1;
for (i=thisMonthEndDay; i<6; i++){ // Next Month's Date
lis += ""+j+"";
j++;
}
if (arguments.length>1){//arguments[0]-时间,arguments[1]-元素标签
arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis;
arguments[1].parentNode.innerHTML = CalenderTitle;
}else{
var CalenderBox = style+"" + //"
" +
"" +
"
"+CalenderTitle+"
"+
"
"+""+"
"+
"
" +
"
" +
"- 日
" +
"- 一
" +
"- 二
" +
"- 三
" +
"- 四
" +
"- 五
" +
"- 六
" +
"
" +
"
" +
"
" +
"
" +
"
设计心得：该控件的样式设计参考了另外的同款空间，采用不同的css调用方式，代码完全重写。经过一系列激战，过程有点点艰辛，而这样一来自己的前端设计水平也有所提高，收获还是挺大的！定义该空间版本为bata1.0，分享给大家。
转载请说明出处：http://blog.csdn.net/seedingly/article/details/19031827
有任何建议请回复留言！
