vue日历组件 切换月周日都可选择,vue日历组件
这篇文章主要为大家详细介绍了某视频剪辑软件实现周日历切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现周日历切换效果的具体代码，供大家参考，具体内容如下
废话不多说，直接上干货，需要的朋友自取
代码：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题周日历/标题
！-引入组件样式-
link rel=样式表 href= https://un pkg。com/element-ui/lib/theme-粉笔/index。 CSS
/头
身体
div id=应用程序
！-上面的日历-
div class=日历
div class=arrow
I class= El-icon-arrow-left @ click= arrow( left )/I
I class= El-icon-arrow-right @ click= arrow( right )/I
/div
El日历v-model= value :range= date range /El日历
/div
！-下面的日历-
div class=date
div class=arrow0
I class= El-icon-arrow-left @ click= weekPre /I
I class= El-icon-arrow-right @ click=下周/I
/div
！-年份月份-
div class=month
p{{当前年份}}年{{当前月}}月/p
/div
！-星期-
ul class=工作日
里一/李
里二/李
里三/李
里四/李
里五/李
里六/李
里日/李
/ul
！-日期-
ul class=天
Li @ click= pick(day) v-for=(day，index) in days :key=index
！-本月-
span v-if=day.getMonth() 1！=当月 class=其他月 { day。getdate()} }/span
span v-else
！-今天-
span v-if=day.getFullYear()==新日期()。getFullYear() day.getMonth()==新日期()。getMonth() day.getDate()==新日期()。getDate() class= active { day。getDate()} }/span
span v-else { { day。getdate()} }/span
/span
/李
/ul
/div
/div
/body
！-引入vue -
script src= https://UNP kg。com/vue/dist/vue。js /脚本
！-引入组件库-
script src= https://UNP kg。com/element-ui/lib/index。js /脚本
脚本
新Vue({
埃尔： #app ，
数据：函数(){
返回{
//上
值： ,
结束日期： ,
日期范围：[],
日期：0,
//下
当前年份： ,//年份
当前月： ,//月份
当前日期： ,//日期
当前周： ,//星期
天数：[],
}
},
已安装(){
},
已创建(){
//上面的日历
这个。日期列表(这个。datenum)；
控制台。日志(这个。日期范围)；
//下面的日历
这个。initdata()；
},
方法：{
//上面的日历
//获取当前时间的周一
getMonday(日期){
var day=date。getday()；
变量增量日
if (day==0) {
delta day=6；
}否则{
delta day=day-1；
}
var Monday=新日期(日期。gettime()-delta day * 24 * 60 * 60 * 1000)；
星期一。sethours(0)；
星期一。设置分钟数(0)；
星期一。设置秒数(0)；
周一返回；//返回选定时间的周一的0时0分0秒
},
getDateNew(time) {
console.log(时间);
let times=新日期（时间);
让年份=时间。获取整年()；
let month=times.getMonth() 1 10？0 (次。getmonth()* 1 1):次。getmonth()* 1 1；
let day=times.getDate() 10？ 0 次。getdate()* 1:次。getdate()* 1；
返回年份-月-日；
},
日期列表（增量){
//将时间对象转换为时间戳并加几天后转换为时间对象
var DateNews=this.getMonday(
新日期((新日期()。getTime()/1000 86400 * 7 * delta)* 1000)
);
让开始日期=这个。getdatenew(日期新闻，delta)；
this.endDate=this.getDateNew(
新日期((datews。gettime()/1000 6 * 86400)* 1000)
);
this.dateRange=[startDate，this。结束日期]；
},
箭头（箭头){
if (arrow==left) {
这个。datenum-；
这个。日期列表(这个。datenum)；
} else if (arrow==right) {
this.dateNum
这个。日期列表(这个。datenum)；
}
},
//下面的日历
格式日期（年、月、日){
常数y=年
让m=月
if (m 10) m=`0${m}
设d=天
if (d 10) d=`0${d}
返回" ${y}-${m}-${d} "
},
initData (cur) {
let date=
如果（当前){
日期=新日期（当前)
}否则{
日期=新日期()
}
这个。当前日期=日期。getdate()//今日日期几号
这个。当前年份=日期。获取整年()//当前年份
这个。当月=日期。getmonth()1//当前月份
这个。当前周=日期。getday()//1.6,0 //星期几
if (this.currentWeek===0) {
this.currentWeek=7
}
const str=this。格式化日期(this。当前年份，this.currentMonth，this.currentDay) //今日日期年-月-日
this.days.length=0
//今天是周日，放在第一行第七个位置，前面6个这里默认显示一周，如果需要显示一个月，则第二个循环为i=35- this.currentWeek
/* eslint-禁用*/
对于(设我=这个。当前周-1；I=0；i -=1) {
常数d=新日期(str)
d.setDate(d.getDate() - i)
//console.log(y: d.getDate())
本。天。推(四)
}
对于(设I=1；I=7-这个。当前周；i=1) {
常数d=新日期(str)
设置日期(d.getDate() i)
本。天。推(四)
}
},
//上个星期
weekPre () {
const d=this.days[0] //如果当期日期是七号或者小于七号
d.setDate(d.getDate() - 7)
this.initData(d)
},
//下个星期
下周(){
const d=this.days[6] //如果当期日期是七号或者小于七号
d.setDate(d.getDate() 7)
this.initData(d)
},
//上一個月传入当前年份和月份
pickPre(年，月){
常数d=新日期(this.formatDate(年，月，1))
d。设置日期(0)
这个。initdata(这个。formatdate(d . get full year()，d.getMonth() 1，1))
},
//下一個月传入当前年份和月份
选择下一个（年，月){
常数d=新日期(this.formatDate(年，月，1))
d。设置日期(35)
这个。initdata(这个。formatdate(d . get full year()，d.getMonth() 1，1))
},
//当前选择日期
选择（日期){
警惕(这个。格式日期(日期。get full year()、date.getMonth() 1、date.getDate())
},
},
})
/脚本
样式lang=scss
#app {
宽度：40%;
边距：自动；
}
ul {
填充：0;
}
李{
列表样式类型：无；
}
/* 上面的日历*/。日历{
位置：相对；
宽度：100%;
背景：# fff
边距-顶部：20px
左边距：20px
}。电子日历_ _标题{
显示：块；
}。电子日历表100 . El-日历日{
高度：自动；
文本对齐：居中；
}。埃尔-日历-表td.is-selected {
背景色：# 24b18d
颜色：# fff
}。电子日历表100 . El-日历日：悬停{
背景色：# 24b18d
颜色：# fff
}。电子日历表{
border-bottom:1px solid # E4 e4e 4；
垫底：15px
}。电子日历表。下一个{
颜色：rgb(143，143，143)；
}。埃尔日历_ _标题，埃尔日历_ _按钮组{
文本对齐：居中；
}。箭头{
宽度：100%;
最大高度：46px
位置：绝对；
top:15px；
文本对齐：居中；
}。箭头我{
字体大小：20px
光标：指针；
}。箭头我：第n个孩子(1) {
右边距：10%;
文本对齐：左对齐；
}。箭头我：第n个孩子(2) {
左边距：10%;
文本对齐：右对齐；
}
/* 下面的日历*/。日期{
位置：相对；
边距-顶部：20px
填充：10px 20px
背景色：# D3D3D3
}。箭头0
宽度：100%;
最大高度：46px
位置：绝对；
top:27px；
左：0px
文本对齐：居中；
}。箭头0 i {
字体大小：20px
光标：指针；
}。arrow 0 I:n-child(1){
右边距：10%;
文本对齐：左对齐；
}。arrow 0 I:n-child(2){
左边距：10%;
文本对齐：右对齐；
}。月份{
文本对齐：居中；
}。工作日{
显示器：flex
}。平日李{
flex:1；
文本对齐：居中；
}。天数{
显示器：flex
}。天黎{
flex:1；
文本对齐：居中；
光标：指针；
}。天黎跨度{
显示：内嵌-块；
宽度：22px
高度：22px
}。天黎跨度：盘旋{
颜色：# fff
背景色：# 409EFF
边界半径：50%;
}。活动{
显示：内嵌-块；
颜色：# fff
边界半径：50%;
背景色：#fa6854！重要；
}。其他月{
颜色：# e4393c
}
/风格
/html
第二种日历的实现方式
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。