制作日历控件纯粹是Javaｓｃｒｉｐｔ

使用以前的日历控件是直接从网上下载一个源使用，心已干，只想写自己的日历控件，最近来了兴趣，时间是允许的，所以自己写一个函数，仍然是完美的，只是接口。也许是最宝贵的点是显示在输入控件的右侧按钮。我只是直接添加一个背景输入，然后删除输入边界来实现它。

这是最初的版本，然后我们打算制作纯Javaｓｃｒｉｐｔ版本，然后计划使用jQuery来完成它。

日历控件

{ # date_text
背景图片：URL（图片输入/ PNG）；
后台重复：不重复；
宽度：198px；
身高：27px；
边界：无；
左：5px填充；
光标：指针；
}

{ # cal_body
宽度：198px；
高度：自动；
溢出：隐藏；
# cccccc solid 1px边框；
显示：无；
位置：绝对；
Z指数：10；
}

{线。
宽度：100%；
身高：26px；
浮点数：左；
背景颜色：# 0ff；
字体大小：14px；
}

{。立方体
浮点数：左；
宽度：26px；
身高：26px；
行高：26px；
文本对齐：中心；
左：2px保证金；
边距：2px；
}

{。按钮
浮点数：左；
背景颜色：# CCC；
左：10px保证金；
宽度：20px；
身高：20px；
文本对齐：中心；
行高：20px；
边界半径：3px；
border: solid 1px；
边距：2px；
光标：指针；
}

{。year_month
浮点数：左；
左：10px保证金；
宽度：90px；
身高：19px；
文本对齐：中心；
行高：19px；
边界半径：6px；
}

{。end_tag
身高：26px；
行高：26px；
左：10px保证金；
}
date.prototype.toformatstring =函数（）{
VaR结果= this.getfullyear（）+-+（this.getmonth（）+ 1）+-+ this.getdate（）；
返回结果；
}；

var =新日期（）；
无功month_big =新的数组（1
无功month_small =新的数组（4

确定数组是包含在数组或对象的功能要素，包括返回true，不包含则返回假
功能array_contain（数组obj）{
对于（var i = 0；i < array.length；i++）{
如果（数组{我} = obj）
返回true；
}
返回false；
}

法官年是闰年，闰年是真的，否则它会返回false。
功能isleapyear（年）{
var =年% 4；
var =年% 100；
var =年% 400；
如果（（= = 0）（b）！= 0））| |（C = = 0））{
返回true；
}
返回false；
}

功能hidecalendar（）{
无功calbody = document.getelementbyid（cal_body ）；
cal_body.style.display =没有；
}

功能showcalendar（）{
无功calbody = document.getelementbyid（cal_body ）；
VaR的风格= getdefaultstyle（calbody，显示）；
如果（样式否）
cal_body.style.display =块；
如果（样式= 块）
cal_body.style.display =没有；

无功date_text = document.getelementbyid（date_text ）；
VaR值= date_text.value；
init（瓦尔）；
}

函数init（瓦尔）{
ClearCube（）；

无功temp_date；
无功date_text = document.getelementbyid（date_text ）；
如果（={）
temp_date =今天；
date_text.value = today.toformatstring（）；
}
别的{
temp_date =新的日期（Val）；
}

VaR年= temp_date.getfullyear（）；
VaR月= temp_date.getmonth（）+ 1；
var date = temp_date.getdate（）；
（1）temp_date.setdate；

var启动= temp_date.getday（）+ 7；
VaR的结束；

如果（array_contain（month_big，月））{
结束=开始+ 31；
}
如果（array_contain（month_small，月））{
结束=开始+ 30；
}
别的{
如果（isleapyear（年））{
结束=开始+ 29；
}
别的{
结束=开始+ 28；
}
}

对于（var i =开始；i <结束；i + +）{
VaR的立方体= document.getelementsbyclassname（魔方）项目（我）；
cube.innerhtml =我启动+ 1；

cube.style.cursor =指针；
cube.onmouseover =函数（）{
this.style.backgroundcolor =# 0ff；
}
如果（日期=（i开始+ 1））
cube.style.backgroundcolor =# 0ff；
别的{
cube.onmouseout =函数（）{
this.style.backgroundcolor =；
}
}
cube.onclick =函数（）{
date_text.value =年+-+月+-+ this.innerhtml；

cal_body.style.display =没有；
}
}

document.getelementbyid（text_year价值=年）；
document.getelementbyid（text_month价值=月）；
}

功能ClearCube（）{
对于（var i = 7；i < 49；i + +）{
VaR的立方体= document.getelementsbyclassname（魔方）项目（我）；
cube.innerhtml = ；
cube.style.backgroundcolor = ；
}
}

功能量仅有（）{
如果（验证（））{
无功old_year = parseInt（document.getelementbyid（text_year）。值）；
如果（old_year > 1960）{
VaR年= old_year - 1；
VaR月= parseInt（document.getelementbyid（text_month）。值）；
var=++1；
init（瓦尔）；
}
}
}

功能yearup（）{
如果（验证（））{
无功old_year = parseInt（document.getelementbyid（text_year）。值）；
如果（old_year＜2050）{
VaR old_year + 1年=；
VaR月= parseInt（document.getelementbyid（text_month）。值）；
var=++1；
init（瓦尔）；
}
}
}

功能monthdown（）{
如果（验证（））{
无功old_month = parseInt（document.getelementbyid（text_month）。值）
If (old_month > 1) {
VaR年= parseInt（document.getelementbyid（text_year）。值）；
old_month VaR月= 1；
var=++1；
init（瓦尔）；
}
{其他
VaR年= parseInt（document.getelementbyid（text_year）。值）- 1；
var月份= 12；
var=++1；
init（瓦尔）；
}
}

}

功能monthup（）{
如果（验证（））{
无功old_month = parseInt（document.getelementbyid（text_month）。值）
如果（old_month＜12）{
VaR年= parseInt（document.getelementbyid（text_year）。值）；
VaR月= parseInt（document.getelementbyid（text_month）。值）+ 1；
var=++1；
init（瓦尔）；
}
{其他
VaR年= parseInt（document.getelementbyid（text_year）。值）+ 1；
var月份= 1；
var=++1；
init（瓦尔）；
}
}
}

功能验证（）{
VaR年= document.getelementbyid（text_year ）的价值；
VaR月= document.getelementbyid（text_month ）的价值；
如果（isnan（年）| | isnan（月））{
警报（请输入正确的年份月份）；
返回false；
}
别的{
如果（年% 1 = 0 | |！月份% 1！= 0）{
警报（请输入正确的年份月份）；
返回false；
}
别的{
年= parseInt（年）；
如果（2050年）{
警告（请输入1960至2050年度）！；
返回false；
}
否则如果（月12）{
警告（请输入正确的月份）！；
返回false；
}
别的{
返回true；
}
}
}
}

函数更改（）{
如果（验证（））{
VaR年= document.getelementbyid（text_year ）的价值；
VaR月= document.getelementbyid（text_month ）的价值；
var=++1；
init（瓦尔）；
}
}

功能getdefaultstyle（对象，属性）{
返回的对象。currentstyleobj。currentstyle {属性}：document.defaultview.getcomputedstyle（obj，false）{属性}；
}

年以上
月
白天
一
二
三
四
五
六




以上是本文的全部内容，希望大家能喜欢。