您的位置:首页 > Web前端 > Vue.js

uni-app微信小程序vue二次封装日历组件

2019-06-19 15:19 846 查看

注意:重点在28 30 31天
1.初始化一些数据并且对特殊的日期进行处理

2. // 根据年月日设置当前月有多少天 并更新年月日数组
这个方法在生命周期onload,created生命周期调用一次 其中传入的值为上面截图初始化的数据即可,_th为this实例
还需要在日历组件滑动onchange时调用一次,传入的参数为当前onchange里接收的参数
dataMethods(year, month, day, hour, _th) {
let daysNum =
year === nowYear && month === nowMonth
? getDays(year, month)
: getDays(year, month);
day = day > daysNum ? 1 : day;

let years = [];
let months = [];
let days = [];
let hours = [];

let yearIdx = 0;
let monthIdx = 0;
let dayIdx = 0;
let hourInx = 0;

// 重新设置年份列表
for (let i = nowYear; i <= nowYear + 10; i++) {
years.push(i);
}
years.map((v, idx) => {
if (v === year) {
yearIdx = idx;
}
});

// 重新设置月份列表
for (let i = 1; i <= 12; i++) {
if (i < 10) {
i = "0" + i;
}
months.push(i);
}
months.map((v, idx) => {
if (v === month) {
monthIdx = idx;
}
});

// 重新设置日期列表
for (let i = 1; i <= daysNum; i++) {
days.push(i);
}
days.map((v, idx) => {
if (v === day) {
dayIdx = idx;
}
});

// 重新设置时间列表
for (let i = 0; i <= 23; i++) {
if (i < 10) {
i = "0" + i;
}
hours.push("" + i);
}
hours.map((v, idx) => {
if (v === hour) {
hourInx = idx;
}
});

_th.years = years;
_th.months = months;
_th.days = days;
_th.months = months;
_th.year = year;
_th.month = month;
_th.day = day;
_th.hours = hours;
_th.hour = hour;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: