效果图
日期选择器用的是uview的日历插件 这是uview组件库链接
主要是上边的这个时间显示需要手动来做了
定义data 为 一个空字符串
赋值要用
weekDayZh:[
{name:'周日',index:0},
{name:'周一',index:1},
{name:'周二',index:2},
{name:'周三',index:3},
{name:'周四',index:4},
{name:'周五',index:5},
{name:'周六',index:6}]
let weekIndex = new Date().getDay();
//当前日期之后的
for (let i = 0; i <= 7 - weekIndex; i++) {
this.data.push(this.getWeek(i))
}
console.log(this.data) //data就是一周的
我获取的是今天往后七天
如果需要其他 改这里
let weekIndex = new Date().getDay();
//可得到当前日期以及之前的
for (let i = weekIndex - 1; i >= 0; i--) {
data.push(this.getWeek(-i))
}
//当前日期之后的
for (let i = 1; i <= 7 - weekIndex; i++) {
data.push(this.getWeek(i))
}
下面是对数据的处理,方便渲染
getWeek(day) {
var today = new Date();
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
today.setTime(targetday_milliseconds);
var tYear = today.getFullYear();
var tMonth = today.getMonth() + 1;
var tDate = today.getDate();
tDate = tDate;
let result;
//ios的格式判断
if (uni.getSystemInfoSync().platform == 'ios') {
result = tYear + "/" + tMonth + "/" + tDate // 日期整体值
} else {
result = tYear + "-" + tMonth + "-" + tDate // 日期整体值
}
//周几
let weekIndex = new Date(result).getDay();
let getDay = this.weekDayZh.filter((el)=> el.index == weekIndex)
//改变今天的选中状态
var d = new Date()
var days = d.getDate()
let daylist = {
day: tDate, // 天
isToday: tDate == days ? true : false, // 是否选中
month: tMonth, // 月份
result: result, // 日期整体值
week: getDay[0].name, //星期
year: tYear, // 年份
}
return daylist
},
到这就完成了,打印出来的就是这样
点击选择也是 同理
只需要把当前时间传入就可以,每次选择时清空一下this.data
let weekIndex = new Date(e.result).getDay(); //e.result = 2021-1-12