本文实例为大家分享了vue-week-picker实现按周切换的日历的具体代码,供大家参考,具体内容如下
<强> vue-week-picker
安装
npm安装vue-week-picker——save-dev
<强>演示
<李>原生:线上演示李
<李>与element-ui结合使用:线上演示李
<强>功能
<李>自适应式按周切换李
<李>与DatePicker日期选择器使用
李
<强>结合Element-ui使用
效果
使用
& lt; VueWeekPicker @dateValue=" https://www.yisu.com/zixun/dateValue "/比;
或
& lt; vue-week-picker @dateValue=" https://www.yisu.com/zixun/dateValue "/比;
从“进口VueWeekPicker vue-week-picker ';
出口默认{
组件:{
VueWeekPicker
}
}
或
出口默认{
组件:{
“vue-week-picker”: VueWeekPicker
}
}
代码
& lt; template>
& lt; div类=叭掌凇北?
& lt; el-row>
& lt; el-col:跨度=?4”比;
& lt; div类="周"比;
& lt; !——日期——比;
& lt; ul类="天"在
& lt;李@click=皐eekPre”class=皃rev-btn”比;
& lt;我class=" fa fa-angle-left fa-icon”aria-hidden=" true "祝辞& lt;/i>
& lt;跨类=" hidden-sm-and-down "在上一周& lt;/span>
& lt;/li>
李& lt;
@click="选择(天,指数)"
v代表="(天,指数)在天”
:关键="指数”
:类="{选择:指数==tabIndex}”
比;
& lt; !——本月——比;
& lt;跨度v=" day.getMonth () + 1 !=currentMonth”类=绷礁鲈耰tem-wrapper”比;
| & lt; p>{{天getWeekFormat}} & lt;/p>
& lt;跨类=" hidden-sm-and-down "在{{天| dateFormat}} & lt;/span>
& lt;/span>
& lt;跨越v-else>
& lt; !——今天——比;
& lt;跨
v=" day.getFullYear新日期()()==.getFullYear (),,.getMonth day.getMonth()==新的日期()(),,.getDate day.getDate()==新的日期()()
类=" today-item "
在今天& lt;/span>
& lt;跨类=癷tem-wrapper”v-else>
| & lt; p>{{天getWeekFormat}} & lt;/p>
& lt;跨类=" hidden-sm-and-down "在{{天| dateFormat}} & lt;/span>
& lt;/span>
& lt;/span>
& lt;/li>
& lt;李@click=皐eekNext”class=皀ext-btn”比;
& lt;跨类=" hidden-sm-and-down "祝辞下一周& lt;/span>
& lt;我class=" fa fa-angle-right fa-icon”aria-hidden=" true "祝辞& lt;/i>
& lt;/li>
& lt; li>
& lt; span>
& lt; el-date-picker
类=" right-pick-btn "
@change=" pickDate "
v模型=" value1 "
type="日期"
占位符="按日期查询”
祝辞& lt;/el-date-picker>
& lt;/span>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/el-col>
& lt;/el-row>
& lt; el-row>
& lt; el-col:跨度=" 20 ":抵消=?”class=笆奔浞段А北?
& lt;跨
@click=" pickTime(时间、索引)”
v代表="(时间、索引)时代”
:关键="指数”
:类="{活跃:指数==tabTimeIndex}”
在{{时间}}& lt;/span>
& lt;/el-col>
& lt;/el-row>
& lt;/div>
& lt;/template>
& lt; script>/* eslint-disable */从“进口时刻时刻”;
出口默认{
道具:{
dateValue: {
类型:字符串,
默认值:时刻(新日期()).format (“YYYY-MM-DD”)
},
时间价值:{
类型:字符串,
默认值:“0”
}
},
数据(){
返回{
currentYear: 1970//年份
currentMonth: 1、//月份
currentDay: 1、//日期
currentWeek: 1、//星期
天:[],
value1:“”,
tabIndex:空,
tabTimeIndex: 0,
时间:(
“00:00 ~ 06:00时”,
“~ 12:00 06:00时”,
12:00 ~ 18:00,
“18:00 24:00”,
“今日节目”
]
};
},
过滤器:{
dateFormat(日期){
返回时间(日期).format (“YYYY-MM-DD”);
},
getWeekFormat(日期){
const weeksObj={
1:“周一”,
2:“周二”,
3:“周三”,
4:“周四”,
5:“周五”,
6:“周六”,
7:“周日”
};
让weekNumber=时间(日期).isoWeekday ();
返回weeksObj [weekNumber];
}
},
安装(){
const指数=_.findIndex(这一点。天,函数(o) {//控制台。日志(o:, o.getDate ());//控制台。日志(“新日期().getDate():“,新的日期().getDate ());
返回o.getDate()===新的日期().getDate ();
});
控制台。日志(“指数:”,指数);
这一点。tabIndex=指数;
},
创建(){
this.initData(空);
},
方法:{
formatDate(年、月、日){
const y=;
让m=月;
如果(m & lt;10)m=0 $ {m} ';
让d=天;
如果(d & lt;10)d=0 $ {d} ';
返回“$ {y} - {m} - {d}’美元;
},
pickDate(日期){
让newDate=时间(日期).format (“YYYY-MM-DD”);
这一点。美元发出(“dateValue”, newDate);
},
initData(坏蛋){
让日期=" ";
如果(坏蛋){
日期=new日期(坏蛋);
其他}{
日期=new日期();
}
这一点。currentDay=date.getDate ();//今日日期几号
这一点。currentYear=date.getFullYear ();//当前年份
这一点。currentMonth=date.getMonth () + 1;//当前月份
这一点。currentWeek=date.getDay ();//1……6 0//星期几
如果这一点。currentWeek===0) {
这一点。currentWeek=7;
}
const str=this.formatDate (
this.currentYear,
this.currentMonth,
this.currentDay
);//今日日期年——月——日
this.days。长度=0;//今天是周日,放在第一行第7个位置,前6个面这里默认显示一周,如果需要显示一个月,则第二个循环为i
