vue elementui时间控件,(单框同时选)范围选择周,季,年。
一、效果图因官网elementui仅有日和月的范围选择控件。所以下面开发了周季年,并放出周次。二、版本及下载1.实现需要修改源码,目前修改的版本为2.15.3,所以想要实现该方法,请先将elementui升级或者降到2.15.3.2.将lib包替换到node_module/element-ui下的liblib包下载地址:https://download.csdn.net/download/qq_3
·
一、效果图
因官网elementui仅有日和月的范围选择控件。所以下面开发了周季年,并放出周次。
二、版本及下载
1.实现需要修改源码,目前修改的版本为2.15.3,所以想要实现该方法,请先将elementui升级或者降到2.15.3.
2.将lib包替换到node_module/element-ui下的lib
lib包下载地址:
https://download.csdn.net/download/qq_39019765/44321511
三、代码中的使用
1.范围周:
这里周报同样用到的是日组件,用日组件进行修改。其中type=“daterange”
<el-date-picker
v-model="date"
@change="changeDate()"
type="daterange"
align="center"
unlink-panels
range-separator="~"
start-placeholder="Start date"
end-placeholder="End date"
show-week-number="true"
size="small"
class="date-class"
:format="format"
:picker-options="pickerOptionsType"
value-format="yyyy-MM-dd"
prefix-icon="calendar-icon"
>
</el-date-picker>
common为 import * as common from “…/assets/js/common”; 内容在下面
data() {
return {
time: "week",
newDate: [],
pickerOptions: {
firstDayOfWeek: 1
},
};
},
computed: {
date: {
get() {
let newDate = this.newDate;
if (newDate && newDate.length <= 0) {
let endDate = common.addDays(new Date(), -1);
let beginDate = endDate;
newDate = [beginDate, endDate];
}
return newDate;
},
set(newDate) {
if (newDate && newDate.length > 0) {
let weekStart = common.getWeekStartAndEnd(0, new Date(newDate[0]));
let weekEnd = common.getWeekStartAndEnd(0, new Date(newDate[1]));
this.newDate = [weekStart[0], weekEnd[1]];
}
}
},
format: {
get() {
let timeType = this.time;
let date = this.date;
if ("week" == timeType && date && date.length > 0) {
let beginYearWeek = common.getYearAndWeek(date[0], date[1]);
let endYearWeek = common.getYearAndWeek(date[1], date[0]);
return beginYearWeek + endYearWeek;
} else {
return "";
}
}
},
dateType: {
get() {
return this.dateType;
}
},
pickerOptionsType: {
get() {
let timeType = this.time;
return this.pickerOptions;
}
}
}
common.js:
Date.prototype.format = function() {
let s = "";
let mouth =
this.getMonth() + 1 >= 10
? this.getMonth() + 1
: "0" + (this.getMonth() + 1);
let day = this.getDate() >= 10 ? this.getDate() : "0" + this.getDate();
s += this.getFullYear() + "-"; // 获取年份。
s += mouth + "-"; // 获取月份。
s += day; // 获取日。
return s; // 返回日期。
};
/**
* @param date 传入的日期
* @param num 加减的天数,加为正,减为负
* @returns 格式化后的日期
*/
export function addDays(date, num) {
date.setDate(date.getDate() + num);
return date.format();
}
//将日期转换成一年中的第几周
export function getYearWeek(date) {
//按照国际标准
let time,
week,
checkDate = new Date(date);
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
time = checkDate.getTime();
checkDate.setMonth(0);
checkDate.setDate(1);
week = Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
return week;
}
//获取当前count个周的起止日期,如:count=0 ,就是当前周,-1就是上周,以此类推
export function getWeekStartAndEnd(count, currentDate) {
//起止日期数组
let resultArr = new Array();
let millisecond = 1000 * 60 * 60 * 24;
currentDate = new Date(currentDate.getTime() + millisecond * 7 * count);
let week = currentDate.getDay();
//减去的天数
let minusDay = week != 0 ? week - 1 : 6;
//获得当前周的第一天
let currentWeekFirstDay = new Date(
currentDate.getTime() - millisecond * minusDay
);
//获得当前周的最后一天
let currentWeekLastDay = new Date(
currentWeekFirstDay.getTime() + millisecond * 6
);
resultArr.push(currentWeekFirstDay.format());
resultArr.push(currentWeekLastDay.format());
return resultArr;
}
//返回格式 2019年第23周,特别注意跨年一周的问题
export function getYearAndWeek(date, anotherDate) {
let week = getYearWeek(date);
let year = date.substring(0, 4);
let anotherYear = anotherDate.substring(0, 4);
//处理跨年特殊日期
if (anotherDate > date) {
let betweenDay = getBetweenDay(new Date(date), new Date(anotherDate));
if (betweenDay == 7 && anotherYear != year) {
if (week == 1) {
year = parseInt(year) + 1;
}
}
} else {
let betweenDay = getBetweenDay(new Date(anotherDate), new Date(date));
if (betweenDay == 7 && anotherYear != year) {
if (week != 1) {
year = parseInt(year) - 1;
}
}
}
return `${year}年第${week}周`;
}
export function getBetweenDay(beginDate, endDate) {
let dateSpan = endDate - beginDate;
dateSpan = Math.abs(dateSpan);
let days = Math.floor(dateSpan / (24 * 3600 * 1000));
return days + 1;
}
2.范围季:
<el-date-picker
v-model="date"
type="quarterrange"
align="center"
unlink-panels
range-separator="~"
start-placeholder="Start date"
end-placeholder="End date"
size="small"
class="date-class"
prefix-icon="calendar-icon"
>
</el-date-picker>
3.范围年
<el-date-picker
v-model="date"
type="yearrange"
class="date-class"
range-separator="~"
size="small"
value-format="yyyy"
prefix-icon="calendar-icon"
align="center"
unlink-panels
>
</el-date-picker>
更多推荐
已为社区贡献1条内容
所有评论(0)