js简单日历代码,日历控件的代码
示例代码
模板
div id=日历
！-年份月份-
div class=month
保险商实验所
！-点击会触发pickpre函数，重新刷新当前日期@点击(vue v-on:点击缩写) -
里
箭头指针El图标-向左箭头
@click=pickPre(currentYear，currentMonth)
/李
李年-月
span class= choose-year {当前年份} }年/span
span class= choose-month {当前月份} }月/span
/李
里
箭头指针El图标-向右箭头
@click=pickNext(currentYear，currentMonth)
/李
/ul
/div
！-星期-
ul class=工作日
里日/李
里一/李
里二/李
里三/李
里四/李
里五/李
里六/李
/ul
！-日期-
ul class=天
！-核心迭代循环每一次循环用里标签创建一天-
li v-for=(dayobject，i) in days :key=i
！-本月-
！-如果不是本月改变类名加灰色-
跨度
v-if= day对象。日。getmonth()1！=当前月份
其他月份
@ click=获取daytime(day对象。天)’
{{ dayobject.day.getDate() }}
/span
！-如果是本月还需要判断是不是这一天-
span v-else
！-今天同年同月同日-
跨度
v-if=
dayobject.day.getFullYear()==新日期()。getFullYear()
dayobject.day.getMonth()==新日期()。getMonth()
dayobject.day.getDate()==新日期()。获取日期()
字体新日期？活动":"。
@ click=获取daytime(day对象。天，我)’
{{ dayobject.day.getDate() }}
/span
跨度
五-否则
@ click=获取daytime(day对象。天，我)’
:class=newDate==dayobject.day？活动":"。
{{ dayobject.day.getDate() }}
/span
/span
/李
/ul
/div
/模板
脚本
导出默认值{
data() {
返回{
当前日期：1,
当前月：1,
当前年份：2021年，
当前周：1,
天数：[],
新日期：这个. formatDateYMD(新日期()),
纽斯：这个. formatDateYMD(新日期()),
};
},
已创建：函数(){
//在某视频剪辑软件初始化时调用
这个。initdata(null)；
},
方法：{
initData:函数（当前){
//var leftcount=0 //存放剩余数量
定义变量日期；
如果（当前){
日期=新日期(cur)；
}否则{
var now=new Date()；
var d=新日期(this。格式化日期(现在。get full year()、now.getMonth()、1))；
d。setdate(35)；
日期=新日期(this.formatDate(d.getFullYear()，d.getMonth() 1，1))；
}
这个。当前日期=日期。getdate()；
这个。当前年份=日期。获取整年()；
这个。当月=日期。getmonth()1；
这个。当前周=日期。getday()；//1.6,0
if (this.currentWeek===0) {
这个。当前周=7；
}
var str=this。格式化日期(this。当前年份，this.currentMonth，this。当天)；
这个。几天。长度=0；
//今天是周日，放在第一行第七个位置，前面6个
//初始化本周
for(var I=this。当前周；I=0；我- ) {
变量d2=新日期(str)；
D2。设置日期(D2。getdate()-I)；
var dayobjectSelf={ }；//用一个对象包装日期对象以便为以后预定功能添加属性
日物自性。日=D2；
这个。几天。推(日物自)；//将日期放入数据中的天数组供页面渲染使用
}
//其他周
for(var j=1；j=35-这个。当前周；j ) {
var d3=新日期(str)；
D3。设置日期(D3。getdate()j)；
var day object ther={ }；
日对象ther。day=D3
这个。几天。push(day objecther)；
}
},
getDayTime(el，index) {
这个。新日期=El
console.log(el)
},
pickPre:函数（年，月){
//设置日期(0)；上月最后一天
//setDate(-1)；上月倒数第二天
//设置日期(dx)参数高级的(豪华的简写)为上月最后一天的前后高级的(豪华的简写)天
变量d=新日期(this.formatDate(年，月，1))；
d。setdate(0)；
这个。initdata(这个。格式日期(d . get full year()、d.getMonth() 1，1))；
},
选择下一个：函数（年，月){
变量d=新日期(this.formatDate(年，月，1))；
d。setdate(35)；
这个。initdata(这个。格式日期(d . get full year()、d.getMonth() 1，1))；
},
//返回类似2022-05-17 格式的字符串
格式化日期：函数（年、月、日){
变量y=年份；
var m=月；
if(m 10)m= 0 m；
变量d=天；
如果(D10)d= 0 d；
返回y - m - d；
},
},
};
/脚本
风格
#日历{
字体大小：12px
宽度：100%;
边距：0自动；
背景：# ECF 6ff；
}。月份{
宽度：100%;
颜色：# 333333;
}。月份ul {
边距：0;
填充：0;
显示器：flex
justify-content:space-between；
高度：35px
}。年月{
显示器：flex
对齐-项目：居中；
justify-content:space-around；
页边距-顶部：10px
}。选择-月份
文本对齐：居中；
字体大小：12px
}。箭头{
填充：15px
颜色：# 999999;
}。月份ul li {
字体大小：12px
文本转换：大写；
字母间距：3px
}。工作日{
边距：0;
填充：10px
显示器：flex
柔性包装：缠绕；
颜色：# 999;
justify-content:space-around；
}。平日李{
显示：内嵌-块；
宽度：13.6%;
文本对齐：居中；
}。天数{
填充：10px
边距：0;
显示器：flex
柔性包装：缠绕；
}。天黎{
列表样式类型：无；
显示：内嵌-块；
宽度：14.2%;
文本对齐：居中；
垫底：4px
填充顶部：10px
字体大小：12px
颜色：# 000;
}。天李。活动{
填充：6像素10像素
边界半径：50%;
背景：# 00b8ec
颜色：# fff
}。天李。其他月{
填充：5px
颜色：盖恩斯伯勒
}。李：悬停跨度跨度{
填充：6像素10像素
边界半径：50%;
背景：# 00b8ec
颜色：# fff
光标：指针；
}
/style注意：在运行过程中可能会出现一点小问题，这里我用到了一个日期处理类库moment.js，如需安装请执行以下命令安装moment.js插件，在主页。射流研究…全局配置。
新公共管理安装时刻-保存main.js
从“vue”导入某视频剪辑软件
从"时刻"导入时刻；
Vue.prototype. $ Moment=Moment
vue。原型。$ formatDateYMD=function(date){
返回时刻（日期)。格式(“YYYY-MM-DD”)
}相关推荐：【JavaScript视频教程】以上就是教你用射流研究…实现日历功能（附代码示例)的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。