纯javaｓｃｒｉｐｔ日历控件
代码通常只能工作时间，写的纯Javaｓｃｒｉｐｔ的版本，calendar.js文件，然后输入要设置为日历控件设置日历的身份，成为一个日历控件。日历控件
calendar.js引用时，你必须加入defer属性。
calendar.js源代码：
javaｓｃｒｉｐｔ文档
var =新数组（）
var =新的（日期）
无功month_big =新的数组（1
无功month_small =新的数组（4
var分隔符；
VaR的日历= document.getelementbyid（日历）；
无功cal_parent = calendar.parentnode； / /得到父元素
var =（cal_width（日历。clientwidth＜150）150：日历。clientwidth）； / /得到输入的宽度，如果输入的宽度小于150，调整为150150日历块最小宽度
无功cal_height = calendar.clientheight； / /得到输入整数的高度
无功cal_x = calendar.offsetleft； / /从父元素的距离左获取输入，整数
无功cal_y = calendar.offsettop； / /从父元素的距离上获得输入，整数
calendar.style.cursor =指针； / /输入鼠标设置的手
calendar.readonly =只读； / /设置输入是只读的
calendar.onblur = hidecalendar； / /当输入失去焦点，隐藏cal_body
calendar.onclick = showcalendar； / /点击输入调用函数时showcalendar
输入的宽度为1 7减少为网格边长
无功pane_height = cal_width / 7 - 1；
功能hidecalendar（）{
无功cal_body = document.getelementbyid（cal_body ）；
如果（cal_body！=未定义的）{
cal_body.parentnode.removechild（cal_body）；
}
}
主题日历
功能showcalendar（）{
无功cal_body = document.getelementbyid（cal_body ）；
如果（cal_body！=未定义的）{
cal_body.parentnode.removechild（cal_body）；
}
别的{
无功cal_body = document.createelement（div）；
cal_body.id =cal_body ；
cal_body.style.width = cal_width +PX；
cal_body.style.height =汽车；
cal_body.style.overflow =隐藏；
cal_body.style.position =绝对；
cal_body.style.zindex =9；
cal_body.style.left = cal_x +PX；
cal_body.style.top =（cal_y + cal_height + 5）+PX；
cal_body.style.border =solid 1px # cccccc ；
/ /鼠标cal_body，禁用输入cal_body onblur事件，防止因输入和隐藏失去焦点
cal_body.onmouseover =函数（）{
calendar.onblur =定义；
}
鼠标/删除从cal_body，输入启用事件，让投入得到重点，或在空白然后点击了cal_body在其他地方因为没有点击，输入和事件触发事件焦点
cal_body.onmouseout =函数（）{
Calendar.focus（）；
calendar.onblur = hidecalendar；
}
cal_parent.appendchild（cal_body）；
VaR线= document.createelement（div）；
line1.style.width = cal_width +PX；
line1.style.height = pane_height +PX；
line1.style.backgroundcolor =# 0ff ；
VaR BTN1 = document.createelement（div）；
btn1.style.width =（cal_width / 3 - 3）+PX；
btn1.style.height = pane_height +PX；
btn1.style.lineheight = pane_height +PX；
btn1.style.textalign =中心；
btn1.innerhtml =<；
btn1.style.cursor =指针；
btn1.style.cssfloat =左；
btn1.onclick =函数（）{
如果（验证（））{
无功old_year = parseInt（document.getelementbyid（input_year）。值）；
如果（old_year > 1960）{
VaR年= old_year - 1；
VaR月= parseInt（document.getelementbyid（input_month）。值）；
Var Val =年+分隔符+月+分隔符+ 1；
init（瓦尔）；
}
}
}；
line1.appendchild（BTN1）；
无功input_year = document.createelement（输入）；
Input_year.id = input_year;
input_year.style.width =（cal_width / 3）+PX；
input_year.style.height =70%；
input_year.style.cssfloat =左；
input_year.style.textalign =中心；
input_year.onchange =函数（）{
变了（）；
}；
line1.appendchild（input_year）；
var BTN2 = document.createelement（div）；
btn2.style.width =（cal_width / 3 - 3）+PX；
btn2.style.height = pane_height +PX；
btn2.style.lineheight = pane_height +PX；
btn2.style.textalign =中心；
btn2.innerhtml =>；
btn2.style.cursor =指针；
btn2.style.cssfloat =左；
btn2.onclick =函数（）{
如果（验证（））{
无功old_year = parseInt（document.getelementbyid（input_year）。值）；
如果（old_year＜2050）{
VaR old_year + 1年=；
VaR月= parseInt（document.getelementbyid（input_month）。值）；
Var Val =年+分隔符+月+分隔符+ 1；
init（瓦尔）；
}
}
}；
line1.appendchild（BTN2）；
var 2 = document.createelement（div）；
line2.style.width = cal_width +PX；
line2.style.height = pane_height +PX；
line2.style.backgroundcolor =# 0ff ；
var BTN3 = document.createelement（div）；
btn3.style.width =（cal_width / 3 - 3）+PX；
btn3.style.height = pane_height +PX；
btn3.style.lineheight = pane_height +PX；
btn3.style.textalign =中心；
btn3.innerhtml =<；
btn3.style.cursor =指针；
btn3.style.cssfloat =左；
btn3.onclick =函数（）{
如果（验证（））{
无功old_month = parseInt（document.getelementbyid（input_month）。值）
如果（old_month > 1）{
VaR年= parseInt（document.getelementbyid（input_year）。值）；
old_month VaR月= 1；
Var Val =年+分隔符+月+分隔符+ 1；
init（瓦尔）；
}
{其他
VaR年= parseInt（document.getelementbyid（input_year）。值）- 1；
var月份= 12；
Var Val =年+分隔符+月+分隔符+ 1；
init（瓦尔）；
}
}
}；
line2.appendchild（BTN3）；
无功input_month = document.createelement（输入）；
input_month.id =input_month ；
input_month.style.width =（cal_width / 3）+PX；
input_month.style.height =70%；
input_month.style.cssfloat =左；
input_month.style.textalign =中心；
input_month.onchange =函数（）{
变了（）；
}；
line2.appendchild（input_month）；
var BTN4分别= document.createelement（div）；
btn4.style.width =（cal_width / 3 - 3）+PX；
btn4.style.height = pane_height +PX；
btn4.style.lineheight = pane_height +PX；
btn4.style.textalign =中心；
btn4.innerhtml =>；
btn4.style.cursor =指针；
btn4.style.cssfloat =左；
btn4.onclick =函数（）{
如果（验证（））{
无功old_month = parseInt（document.getelementbyid（input_month）。值）
如果（old_month＜12）{
VaR年= parseInt（document.getelementbyid（input_year）。值）；
VaR月= parseInt（document.getelementbyid（input_month）。值）+ 1；
Var Val =年+分隔符+月+分隔符+ 1；
init（瓦尔）；
}
{其他
VaR年= parseInt（document.getelementbyid（input_year）。值）+ 1；
var月份= 1；
Var Val =年+分隔符+月+分隔符+ 1；
init（瓦尔）；
}
}
}；
line2.appendchild（BTN4分别）；
cal_body.appendchild（线）；
cal_body.appendchild（2）；
对于（var i = 0；i < 7；i + +）{
VaR窗格= document.createelement（div）；
pane.classname =窗格；
pane.style.width = pane_height +PX；
pane.style.height = pane_height +PX；
pane.style.lineheight = pane_height +PX；
pane.style.textalign =中心；
pane.style.cssfloat =左；
pane.innerhtml =天{我}；
cal_body.appendchild（窗格）；
}
init（日历值）；
}
}
函数init（瓦尔）{
ClearPane（）；
无功cal_body = document.getelementbyid（cal_body ）；
无功temp_date；
VaR的一年；
VaR的月；
VaR的日期；
如果（={）
temp_date =今天；
calendar.value = today.toformatstring（分离器）；
}
别的{
年为val.year（）；
月= val.month（分离器）；
日期= val.date（分离器）；
temp_date =新的日期（年、月、日）；
}
年为temp_date.getfullyear（）；
月temp_date.getmonth（）+ 1 =；
日期= 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 = 7；i <开始；i ++）{
VaR窗格= document.createelement（div）；
pane.classname =窗格；
pane.style.width = pane_height +PX；
pane.style.height = pane_height +PX；
pane.style.lineheight = pane_height +PX；
pane.style.textalign =中心；
pane.style.cssfloat =左；
cal_body.appendchild（窗格）；
}
对于（var i =开始；i <结束；i + +）{
VaR窗格= document.createelement（div）；
pane.classname =窗格；
pane.style.width = pane_height +PX；
Pane.style.height = pane_height + PX;
pane.style.lineheight = pane_height +PX；
pane.style.textalign =中心；
pane.style.cssfloat =左；
pane.innerhtml =我启动+ 1；
pane.style.cursor =指针；
pane.onmouseover =函数（）{
this.style.backgroundcolor =# 0ff；
}
如果（日期=（i开始+ 1））
pane.style.backgroundcolor =# 0ff；
别的{
pane.onmouseout =函数（）{
this.style.backgroundcolor =；
}
}
pane.onclick =函数（）{
calendar.value =年+月+ +分离器分离器+ this.innerhtml；
cal_body.parentnode.removechild（cal_body）；
}
cal_body.appendchild（窗格）；
document.getelementbyid（input_year价值=年）；
document.getelementbyid（input_month价值=月）；
}
}
格式化输出
date.prototype.toformatstring =功能（分离器）{
VaR结果= this.getfullyear（）+分离器+（this.getmonth）+（1）+分离器+ this.getdate（）；
返回结果；
}；
从格式化字符串中获取一年
string.prototype.year =函数（）{
var str = this.substring（0,4）；
返回字符；
}；
从格式化字符串中获取
string.prototype.month =功能（分离器）{
var启动= this.indexof（分离器）+ 1；
var = this.lastindexof（分离器）；
返回parseInt（this.substring（开始、结束））- 1；
}；
从格式化字符串中获取日期
string.prototype.date =功能（分离器）{
var启动= this.lastindexof（分离器）+ 1；
返回this.substring（开始）；
}；
确定数组是包含在数组或对象的功能要素，包括返回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；
}
删除
功能clearpane（）{
VaR限额= document.getelementsbyclassname（窗格）。长度；
对于（var i = 7；i <限制；i + +）{
VaR窗格= document.getelementsbyclassname（窗格）项目（7）；
pane.parentnode.removechild（窗格）；
}
}
输入以确定合法性
功能验证（）{
VaR年= document.getelementbyid（input_year ）的价值；
VaR月= document.getelementbyid（input_month ）的价值；
如果（isnan（年）| | isnan（月））{
警报（请输入正确的年份月份）；
返回false；
}
别的{
如果（年% 1 = 0 | |！月份% 1！= 0）{
警报（请输入正确的年份月份）；
返回false；
}
别的{
年= parseInt（年）；
如果（2050年）{
警告（请输入1960至2050年度）！；
返回false；
}
否则如果（月12）{
警告（请输入正确的月份）！；
返回false；
}
别的{
返回true；
}
}
}
}
一年的月份/改变处理功能
函数更改（）{
如果（验证（））{
VaR年= document.getelementbyid（input_year ）的价值；
VaR月= document.getelementbyid（input_month ）的价值；
Var Val =年+分隔符+月+分隔符+ 1；
init（瓦尔）；
}
}
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。