数码资讯
js日历控件使用详细的解决方案
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
我最近一直在关注这个项目，这个项目现在终于处于稳定状态，只是为了修复和修改它。作为一个程序员我真的很用力啊，从网络到手机终端界面我都写过，混……在这两天结束的时候，我终于得到了自由。我看了js的一些函数。我突然想到日历控制。所以我试着写一个。作为后台程序员，我的水平有限。让我们用我的学习态度来看看这个例子。
首先，一个常用日期函数：戴特（年份、月份、日）
复制代码代码如下所示：
日期=新日期（）；
一年有
复制代码代码如下所示：
VaR年= this.date.getfullyear（）；
得到月份，这是月份索引，所以+ 1。
复制代码代码如下所示：
VaR月= this.date.getmonth（）+ 1；
一天的电话号码是多少
复制代码代码如下所示：
VaR天= this.date.getdate（）；
把一天定为星期，返回0。星期日1。星期一2。星期二3。星期三4。星期四5。6。6。
复制代码代码如下所示：
VAR周= this.date.getday（）；
这个月的第一个月是星期。
复制代码代码如下所示：
无功getweekday =功能（年，月，日）{
var日期=新日期（年、月、日）；
返回date.getday（）；
}
无功weekstart = getweekday（this.year，this.month-1，1）
得到这个月的天数
复制代码代码如下所示：
无功getmonthdays =功能（年、月）{
var日期=新日期（年份，月份，0）；
返回date.getdate（）；
}
无功monthdays = this.getmonthdays（this.year，这个月）；
我们用了这么多参数。后来，它实际上是关于与星期相对应的日期的操作和判断。下面是动态马赛克标签。
复制代码代码如下所示：
文本对齐：中心；}
窗口。指针函数（）{
函数（）{
This.Init.apply（这个参数）；
}
日历。原型= {
init（函数，容器，选项）{
这个日期=新日期（）；
这一年，this.date.getfullyear（）；
这个月this.date.getmonth（）+ 1 =；
这一this.date.getdate（）；
这个星期this.date.getday（）；
这个weekstart = this.getweekday（this.year，this.month-1，1）；
这个monthdays = this.getmonthdays（this.year，这个月）；
这containerdiv = document.getelementbyid（容器）；
选项=选项！= nulloptions：{
边境：'1px固体绿，
宽度：'400px，
身高：'200px，
背景颜色：'lightgrey，
FontColor：'蓝色'
}
}，
getmonthdays：功能（年、月）{
var日期=新日期（年份，月份，0）；
返回date.getdate（）；
}，
getweekday：功能（年，月，日）{
var日期=新日期（年、月、日）；
返回date.getday（）；
}，
视图：函数（）{
无功tablestr =；
tablestr + =：+年+月，这个月+；
tablestr + = 123456天；
var指数= 1；
这个月的第一天/判断在哪个位置
var样式=；
如果（这。weekstart＜7）
{
tablestr + =；
对于（var i = 0；i < this.weekstart；i++）{
tablestr + =；
}；
对于（var i = 0；i < 7-this.weekstart；i++）{
样式=这个= =（i + 1）背景颜色：绿色；；
索引+；
tablestr + =+（i + 1）+；
}；
tablestr + =；
}
只是相应位置的剩余天数。
整数行和相应的判断/位置
无功remaindays = this.monthdays -（7-this。weekstart）；
无功行= math.floor（remaindays % 7 = = 0remaindays / 7：（（（（remaindays / 7）+ 1））；
VaR计算= math.floor（remaindays / 7）；
对于（var i = 0；i <计数；i + +）{
tablestr + =；
对于（var = 0；k＜7；k + +）{
样式=；
tablestr + =；
tablestr + =指数+ K；
tablestr + =；
}；
tablestr + =；
索引= 7；
}；
最后剩下的天数/位置（不要一周中的几天填写）
无功remaincols = this.monthdays -（指数）；
tablestr + =；
对于（var i = 0；i < remaincols；i++）{
样式=；
tablestr + =；
tablestr + =指数；
tablestr + =；
索引+；
}；
tablestr + =；
tablestr + =；
返回tablestr；
}，
渲染：函数（）{
无功calenderdiv = document.createelement（'div）；
calenderdiv边界= this.options.border。风格；
calenderdiv宽度= this.options.width。风格；
calenderdiv高度= this.options.height。风格；
calenderdiv。光标= 'pointer风格；
calenderdiv。风格。背景颜色= this.options.backgroundcolor；
/ / calenderdiv。风格。颜色= this.options.fontcolor；
calenderdiv。风格。颜色='；
calenderdiv。onclick=功能（e）{
VaR EVT = E | | window.event；
var =目标srcelement | | evt.target EVT；
如果（targettarget.getattribute（'val '））
{
警报（target.getattribute（'val '））；
}
}
无功tablestr = this.view（）；
这tablestr = tablestr；
calenderdiv .innerHTML = tablestr；
var div = document.createelement（'div）；
div.style宽度=汽车；
div.style高度=汽车；
div.appendchild（calenderdiv）；
只是你的div
无功pagerdiv = document.createelement（'div）；
PagerDiv。风格。宽度=汽车；
PagerDiv。风格高度=汽车；
var =；
只是重设参数
无功resetpara =功能（年，月，日）{
日期=新日期（年，月，日）；
这一年= that.date.getfullyear（）；
这that.date.getmonth。月=（）+ 1；
那一天，that.date.getdate（）；
这星期that.date.getday（）；
，weekstart = that.getweekday（that.year，that.month-1，1）；
，monthdays = that.getmonthdays（that.year，，月）；
}
无功prebtn = document.createelement（输入的）；
PreBtn式的按钮；
prebtn值=<；
prebtn。onclick =函数（）{
that.containerdiv.removechild（DIV）；
resetpara（that.year，that.month-2，，天）；
那个（渲染）；
}
无功nextbtn = document.createelement（输入的）；
NextBtn式的按钮；
nextbtn值=>；
nextbtn。onclick =函数（）{
that.containerdiv.removechild（DIV）；
resetpara（that.year，that.month，，天）；
那个（渲染）；
}
PagerDiv.appendChild（prebtn）；
PagerDiv.appendChild（nextbtn）；
div.appendchild（pagerdiv）；
无功dropdiv = document.createelement（'div）；
无功dropdivstr =；
年/年
dropdivstr + =；
对于（var i = 1900；i < 2100；i + +）{
dropdivstr + =
我= = that.year
+我+
+我+；
}；
dropdivstr + =；
月份
dropdivstr + =；
对于（var i = 1；i < 12；i + +）{
dropdivstr + =
我= = that.month
+我+
+我+；
}；
dropdivstr + =；
dropdiv .innerHTML = dropdivstr；
div.appendchild（dropdiv）；
that.containerdiv.appendchild（DIV）；
只要选择事件绑定的年份和月份
ddlchange =函数（）{ var
无功ddlyear = document.getelementbyid（'ddlyear）；
无功ddlmonth = document.getelementbyid（'ddlmonth）；
无功yearindex = ddlyear.selectedindex；
VaR年= ddlyear。选项yearindex } {价值；
无功monthindex = ddlmonth.selectedindex；
VaR月= ddlmonth。选项monthindex } {价值；
that.containerdiv.removechild（DIV）；
ResetPara（年，个月～1，，天）；
那个（渲染）；
}
ddlyear。onchange =函数（）{
DdlChange（）；
}
ddlmonth。onchange =函数（）{
DdlChange（）；
}
}
}
VaR日历=新的日历（'dvtest，{
边境：'1px固体绿，
宽度：'400px，
身高：'200px，
背景颜色：
}
）；
压延机（）；
}
代码已更改视图的表格，解决IE的tableinnerhtml只读问题。选项的添加是可配置。
以上代码有一个简单的说明，函数是最基本的，如果更深入，可以扩展做扩展。
首先，一个常用日期函数：戴特（年份、月份、日）
复制代码代码如下所示：
日期=新日期（）；
一年有
复制代码代码如下所示：
VaR年= this.date.getfullyear（）；
得到月份，这是月份索引，所以+ 1。
复制代码代码如下所示：
VaR月= this.date.getmonth（）+ 1；
一天的电话号码是多少
复制代码代码如下所示：
VaR天= this.date.getdate（）；
把一天定为星期，返回0。星期日1。星期一2。星期二3。星期三4。星期四5。6。6。
复制代码代码如下所示：
VAR周= this.date.getday（）；
这个月的第一个月是星期。
复制代码代码如下所示：
无功getweekday =功能（年，月，日）{
var日期=新日期（年、月、日）；
返回date.getday（）；
}
无功weekstart = getweekday（this.year，this.month-1，1）
得到这个月的天数
复制代码代码如下所示：
无功getmonthdays =功能（年、月）{
var日期=新日期（年份，月份，0）；
返回date.getdate（）；
}
无功monthdays = this.getmonthdays（this.year，这个月）；
我们用了这么多参数。后来，它实际上是关于与星期相对应的日期的操作和判断。下面是动态马赛克标签。
复制代码代码如下所示：
文本对齐：中心；}
窗口。指针函数（）{
函数（）{
This.Init.apply（这个参数）；
}
日历。原型= {
init（函数，容器，选项）{
这个日期=新日期（）；
这一年，this.date.getfullyear（）；
这个月this.date.getmonth（）+ 1 =；
这一this.date.getdate（）；
这个星期this.date.getday（）；
这个weekstart = this.getweekday（this.year，this.month-1，1）；
这个monthdays = this.getmonthdays（this.year，这个月）；
这containerdiv = document.getelementbyid（容器）；
选项=选项！= nulloptions：{
边境：'1px固体绿，
宽度：'400px，
身高：'200px，
背景颜色：'lightgrey，
FontColor：'蓝色'
}
}，
getmonthdays：功能（年、月）{
var日期=新日期（年份，月份，0）；
返回date.getdate（）；
}，
getweekday：功能（年，月，日）{
var日期=新日期（年、月、日）；
返回date.getday（）；
}，
视图：函数（）{
无功tablestr =；
tablestr + =：+年+月，这个月+；
tablestr + = 123456天；
var指数= 1；
这个月的第一天/判断在哪个位置
var样式=；
如果（这。weekstart＜7）
{
tablestr + =；
对于（var i = 0；i < this.weekstart；i++）{
tablestr + =；
}；
对于（var i = 0；i < 7-this.weekstart；i++）{
样式=这个= =（i + 1）背景颜色：绿色；；
索引+；
tablestr + =+（i + 1）+；
}；
tablestr + =；
}
只是相应位置的剩余天数。
整数行和相应的判断/位置
无功remaindays = this.monthdays -（7-this。weekstart）；
无功行= math.floor（remaindays % 7 = = 0remaindays / 7：（（（（remaindays / 7）+ 1））；
VaR计算= math.floor（remaindays / 7）；
对于（var i = 0；i <计数；i + +）{
tablestr + =；
对于（var = 0；k＜7；k + +）{
样式=；
tablestr + =；
tablestr + =指数+ K；
tablestr + =；
}；
tablestr + =；
索引= 7；
}；
最后剩下的天数/位置（不要一周中的几天填写）
无功remaincols = this.monthdays -（指数）；
tablestr + =；
对于（var i = 0；i < remaincols；i++）{
样式=；
tablestr + =；
tablestr + =指数；
tablestr + =；
索引+；
}；
tablestr + =；
tablestr + =；
返回tablestr；
}，
渲染：函数（）{
无功calenderdiv = document.createelement（'div）；
calenderdiv边界= this.options.border。风格；
calenderdiv宽度= this.options.width。风格；
calenderdiv高度= this.options.height。风格；
calenderdiv。光标= 'pointer风格；
calenderdiv。风格。背景颜色= this.options.backgroundcolor；
/ / calenderdiv。风格。颜色= this.options.fontcolor；
calenderdiv。风格。颜色='；
calenderdiv。onclick=功能（e）{
VaR EVT = E | | window.event；
var =目标srcelement | | evt.target EVT；
如果（targettarget.getattribute（'val '））
{
警报（target.getattribute（'val '））；
}
}
无功tablestr = this.view（）；
这tablestr = tablestr；
calenderdiv .innerHTML = tablestr；
var div = document.createelement（'div）；
div.style宽度=汽车；
div.style高度=汽车；
div.appendchild（calenderdiv）；
只是你的div
无功pagerdiv = document.createelement（'div）；
PagerDiv。风格。宽度=汽车；
PagerDiv。风格高度=汽车；
var =；
只是重设参数
无功resetpara =功能（年，月，日）{
日期=新日期（年，月，日）；
这一年= that.date.getfullyear（）；
这that.date.getmonth。月=（）+ 1；
那一天，that.date.getdate（）；
这星期that.date.getday（）；
，weekstart = that.getweekday（that.year，that.month-1，1）；
，monthdays = that.getmonthdays（that.year，，月）；
}
无功prebtn = document.createelement（输入的）；
PreBtn式的按钮；
prebtn值=<；
prebtn。onclick =函数（）{
that.containerdiv.removechild（DIV）；
resetpara（that.year，that.month-2，，天）；
那个（渲染）；
}
无功nextbtn = document.createelement（输入的）；
NextBtn式的按钮；
nextbtn值=>；
nextbtn。onclick =函数（）{
that.containerdiv.removechild（DIV）；
resetpara（that.year，that.month，，天）；
那个（渲染）；
}
PagerDiv.appendChild（prebtn）；
PagerDiv.appendChild（nextbtn）；
div.appendchild（pagerdiv）；
无功dropdiv = document.createelement（'div）；
无功dropdivstr =；
年/年
dropdivstr + =；
对于（var i = 1900；i < 2100；i + +）{
dropdivstr + =
我= = that.year
+我+
+我+；
}；
dropdivstr + =；
月份
dropdivstr + =；
对于（var i = 1；i < 12；i + +）{
dropdivstr + =
我= = that.month
+我+
+我+；
}；
dropdivstr + =；
dropdiv .innerHTML = dropdivstr；
div.appendchild（dropdiv）；
that.containerdiv.appendchild（DIV）；
只要选择事件绑定的年份和月份
ddlchange =函数（）{ var
无功ddlyear = document.getelementbyid（'ddlyear）；
无功ddlmonth = document.getelementbyid（'ddlmonth）；
无功yearindex = ddlyear.selectedindex；
VaR年= ddlyear。选项yearindex } {价值；
无功monthindex = ddlmonth.selectedindex；
VaR月= ddlmonth。选项monthindex } {价值；
that.containerdiv.removechild（DIV）；
ResetPara（年，个月～1，，天）；
那个（渲染）；
}
ddlyear。onchange =函数（）{
DdlChange（）；
}
ddlmonth。onchange =函数（）{
DdlChange（）；
}
}
}
VaR日历=新的日历（'dvtest，{
边境：'1px固体绿，
宽度：'400px，
身高：'200px，
背景颜色：
}
）；
压延机（）；
}
代码已更改视图的表格，解决IE的tableinnerhtml只读问题。选项的添加是可配置。
以上代码有一个简单的说明，函数是最基本的，如果更深入，可以扩展做扩展。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。