嘉兴网站制作套餐,网店美工课本,能进封禁网站的浏览器,阿芹网站建设1.简单日历组件展示 思路#xff1a;根据当前月的第一天是星期几#xff0c;来显示日期
templatediv classwrapel-button clickpreMonth上个月/el-buttonel-tag当前年份{{ curYear }}/el-tage…1.简单日历组件展示 思路根据当前月的第一天是星期几来显示日期
templatediv classwrapel-button clickpreMonth上个月/el-buttonel-tag当前年份{{ curYear }}/el-tagel-tag当前月份{{ curMonth }}/el-tagel-button clicknextMonth下个月/el-buttondiv classweeksdiv v-foritem in week :keyitem classweek{{ item }}/div/divdiv classdays!-- 当月 --div v-foritem in curDays :keyitem cur classcurday{{ item }}/div/div/div
/template
script
import moment from moment;
moment.suppressDeprecationWarnings true;
export default {data() {return {curYear: moment().year(), //当前年curMonth: moment().month() 1, //当前月week: [一, 二, 三, 四, 五, 六, 七],firstDay: moment(${moment().year()}-${moment().month() 1}).startOf(month).day(), //获取当月第一天是星期几;星期日为 0星期六为 6curDays: moment().daysInMonth() //获取当月一共有多少天};},methods: {preMonth() {this.curMonth--;// 如果小于1表示上一年;重置日期if (this.curMonth 1) {this.curYear--;this.curMonth 12;}this.curDays moment(${this.curYear}-${this.curMonth}).daysInMonth();this.firstDay moment(${this.curYear}-${this.curMonth}).startOf(month).day();if (this.firstDay 0) {this.firstDay 7;}},nextMonth() {this.curMonth;// 如果超过12表示下一年;重置日期if (this.curMonth 12) {this.curYear;this.curMonth 1;}this.curDays moment(${this.curYear}-${this.curMonth}).daysInMonth();this.firstDay moment(${this.curYear}-${this.curMonth}).startOf(month).day();if (this.firstDay 0) {this.firstDay 7;}}}
};
/scriptstyle langscss
.wrap {width: 700px;height: 100%;.weeks {width: 100%;height: 50px;display: flex;.week {width: 100px;line-height: 50px;text-align: center;background: gainsboro;}}.days {display: flex;flex-wrap: wrap;.lastday,.curday {width: 100px;line-height: 50px;text-align: center;}.lastday {color: gold;}}
}
/style2.日历组件增强版------带有上个月或者下个月日期 较比上一版本这个版本多了2个方法主要用于更新上个月剩余日期以及下个月最新日期
上个月日期
// 获取上个月剩余天数getPreMonthDays() {if (this.firstDay 1) return; //表示上个月无剩余天数let month this.curMonth;let year this.curYear;month--;if (month 0) {year--;month 12;}// 获取上个月的天数const days moment(${year}-${month}).daysInMonth();this.preDays days;}, 下个月日期
// 获取下个月要显示的天数getNextMonthDays() {let month this.curMonth;let year this.curYear;// 获取当月最后一天是星期几const lastDay moment(${year}-${month}).endOf(month).day();this.nextDays lastDay 0 ? 7 : lastDay;} 整体代码
templatediv classwrapel-button clickpreMonth上个月/el-buttonel-tag当前年份{{ curYear }}/el-tagel-tag当前月份{{ curMonth }}/el-tagel-button clicknextMonth下个月/el-buttondiv classweeksdiv v-foritem in week :keyitem classweek{{ item }}/div/divdiv classdays!-- 上个月 --div v-foritem in firstDay - 1 :keyitem pre classlastday{{ preDays - (firstDay - 1 - item) }}/div!-- 当月 --div v-foritem in curDays :keyitem cur classcurday{{ item }}/div!-- 下个月 --div v-foritem in 7 - nextDays :keyitem next classlastday{{ item }}/div/div/div
/template
script
import moment from moment;
moment.suppressDeprecationWarnings true;
export default {data() {return {preDays: 30,nextDays: 7,curYear: moment().year(), //当前年curMonth: moment().month() 1, //当前月week: [一, 二, 三, 四, 五, 六, 七],firstDay: moment(${moment().year()}-${moment().month() 1}).startOf(month).day(), //获取当月第一天是星期几;星期日为 0星期六为 6curDays: moment().daysInMonth() //获取当月一共有多少天};},mounted() {this.getPreMonthDays();this.getNextMonthDays();},methods: {preMonth() {this.curMonth--;// 如果小于1表示上一年;重置日期if (this.curMonth 1) {this.curYear--;this.curMonth 12;}this.curDays moment(${this.curYear}-${this.curMonth}).daysInMonth();this.firstDay moment(${this.curYear}-${this.curMonth}).startOf(month).day();if (this.firstDay 0) {this.firstDay 7;}// 显示上个月日期this.getPreMonthDays();this.getNextMonthDays();},nextMonth() {this.curMonth;// 如果超过12表示下一年;重置日期if (this.curMonth 12) {this.curYear;this.curMonth 1;}this.curDays moment(${this.curYear}-${this.curMonth}).daysInMonth();this.firstDay moment(${this.curYear}-${this.curMonth}).startOf(month).day();if (this.firstDay 0) {this.firstDay 7;}// 显示上个月日期this.getPreMonthDays();this.getNextMonthDays();},// 获取上个月剩余天数getPreMonthDays() {if (this.firstDay 1) return; //表示上个月无剩余天数let month this.curMonth;let year this.curYear;month--;if (month 0) {year--;month 12;}// 获取上个月的天数const days moment(${year}-${month}).daysInMonth();this.preDays days;},// 获取下个月要显示的天数getNextMonthDays() {let month this.curMonth;let year this.curYear;// 获取当月最后一天是星期几const lastDay moment(${year}-${month}).endOf(month).day();this.nextDays lastDay 0 ? 7 : lastDay;}}
};
/scriptstyle langscss
.wrap {width: 700px;height: 100%;.weeks {width: 100%;height: 50px;display: flex;.week {width: 100px;line-height: 50px;text-align: center;background: gainsboro;}}.days {display: flex;flex-wrap: wrap;.lastday,.curday {width: 100px;line-height: 50px;text-align: center;}.lastday {color: gold;}}
}
/style3.日历组件增强版------可选择区间日期 思路通过clickCount记录点击区间次数默认是0点击第一次是1第二次是2如果clickCount2重置clickCount0
页面渲染通过判断日期是否在选择区间的最大和最小之间来更改背景色
相比较之前更新的代码
方法新增一个点击事件
selectDate(year, day) {this.clickCount;const date new Date(${year}-${this.curMonth}-${day});if (this.clickCount 1) {this.startTime date;} else if (this.clickCount 2) {this.endTime date;this.clickCount 0;}if (this.endTime this.startTime this.endTime) {[this.startTime, this.endTime] [this.endTime, this.startTime];}// console.log(// this.clickCount,// moment(this.startTime).format(YYYY-MM-DD),// moment(this.endTime).format(YYYY-MM-DD)// );} computed: {isSelected() {return (year, day) {const date new Date(${year}-${this.curMonth}-${day});return ((this.startTime date this.endTime date) || date this.startTime || date this.endTime);};}},
整体代码
templatediv classwrapel-button clickpreMonth上个月/el-buttonel-tag当前年份{{ curYear }}/el-tagel-tag当前月份{{ curMonth }}/el-tagel-button clicknextMonth下个月/el-buttondiv classweeksdiv v-foritem in week :keyitem classweek{{ item }}/div/divdiv classdays!-- 上个月 --divv-foritem in firstDay - 1:keyitem pre:class[lastday, { select: isSelected(curYear - 1, preDays - (firstDay - 1 - item)) }]clickselectDate(curYear - 1, preDays - (firstDay - 1 - item)){{ preDays - (firstDay - 1 - item) }}/div!-- 当月 --divv-foritem in curDays:keyitem cur:class[curday, { select: isSelected(curYear, item) }]clickselectDate(curYear, item){{ item }}/div!-- 下个月 --divv-foritem in 7 - nextDays:keyitem next:class[lastday, { select: isSelected(curYear 1, item) }]clickselectDate(curYear 1, item){{ item }}/div/div/div
/template
script
import moment from moment;
moment.suppressDeprecationWarnings true;
export default {data() {return {startTime: null, //记录区间开始时间endTime: null, //记录区间结束时间clickCount: 0, //用于记录点击次数preDays: 30, //上个月天数nextDays: 7, //下个月天数curYear: moment().year(), //当前年curMonth: moment().month() 1, //当前月week: [一, 二, 三, 四, 五, 六, 七],firstDay: moment(${moment().year()}-${moment().month() 1}).startOf(month).day(), //获取当月第一天是星期几;星期日为 0星期六为 6curDays: moment().daysInMonth() //获取当月一共有多少天};},computed: {isSelected() {return (year, day) {const date new Date(${year}-${this.curMonth}-${day});return ((this.startTime date this.endTime date) || date this.startTime || date this.endTime);};}},mounted() {this.getPreMonthDays();this.getNextMonthDays();},methods: {preMonth() {this.curMonth--;// 如果小于1表示上一年;重置日期if (this.curMonth 1) {this.curYear--;this.curMonth 12;}this.curDays moment(${this.curYear}-${this.curMonth}).daysInMonth();this.firstDay moment(${this.curYear}-${this.curMonth}).startOf(month).day();if (this.firstDay 0) {this.firstDay 7;}// 显示上个月日期this.getPreMonthDays();this.getNextMonthDays();},nextMonth() {this.curMonth;// 如果超过12表示下一年;重置日期if (this.curMonth 12) {this.curYear;this.curMonth 1;}this.curDays moment(${this.curYear}-${this.curMonth}).daysInMonth();this.firstDay moment(${this.curYear}-${this.curMonth}).startOf(month).day();if (this.firstDay 0) {this.firstDay 7;}// 显示上个月日期this.getPreMonthDays();this.getNextMonthDays();},// 获取上个月剩余天数getPreMonthDays() {if (this.firstDay 1) return; //表示上个月无剩余天数let month this.curMonth;let year this.curYear;month--;if (month 0) {year--;month 12;}// 获取上个月的天数const days moment(${year}-${month}).daysInMonth();this.preDays days;},// 获取下个月要显示的天数getNextMonthDays() {let month this.curMonth;let year this.curYear;// 获取当月最后一天是星期几const lastDay moment(${year}-${month}).endOf(month).day();this.nextDays lastDay 0 ? 7 : lastDay;},selectDate(year, day) {this.clickCount;const date new Date(${year}-${this.curMonth}-${day});if (this.clickCount 1) {this.startTime date;} else if (this.clickCount 2) {this.endTime date;this.clickCount 0;}if (this.endTime this.startTime this.endTime) {[this.startTime, this.endTime] [this.endTime, this.startTime];}// console.log(// this.clickCount,// moment(this.startTime).format(YYYY-MM-DD),// moment(this.endTime).format(YYYY-MM-DD)// );}}
};
/scriptstyle langscss
.wrap {width: 700px;height: 100%;.weeks {width: 100%;height: 50px;display: flex;.week {width: 100px;line-height: 50px;text-align: center;background: gainsboro;}}.days {display: flex;flex-wrap: wrap;.lastday,.curday {width: 100px;line-height: 50px;text-align: center;cursor: pointer;}.lastday {color: gold;}.select {background: pink;color: #fff;}}
}
/style4.日历组件增强版------可自定义日期内容
未完待续
