uniapp横向滚动选择日期

1.方法封装 common.js

//获取当前时间，格式YYYY-MM-DD HH:MM:SS
const GetNowTime = time => {
	var date = time,
		year = date.getFullYear(),
		month = date.getMonth() + 1,
		day = date.getDate(),
		hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
		minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
		second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
	month >= 1 && month <= 9 ? (month = "0" + month) : "";
	day >= 0 && day <= 9 ? (day = "0" + day) : "";
	// var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
	var timer = year + '-' + month + '-' + day;
	return timer;
}

// 格式化电话号码
const GetPhone = phone => {
	let tel = phone.slice(0, 3) + '****' + phone.slice(7, 11);
	return tel;
}
//返回日期和周几数组
function weekDate() {
	var myDate = new Date();
	myDate.toLocaleDateString();
	var month = myDate.getMonth() + 1;
	var time = myDate.getFullYear() + '年' + month + '月' + myDate.getDate() + '日';
	var total = 1; // 个数
	var dayList = [];
	dayList.push({
		'day': myDate.getDate(),
		'month': myDate.getMonth() + total,
		'week': toWeekDay(myDate.getDay()),
		'year': myDate.getFullYear()
	});
	for (var i = 0; i < 10; i++) {
		myDate.setDate(myDate.getDate() + total); // number 是最近几天  则会自动计算
		// 需求  月份-日   星期几      
		dayList.push({
			'day': myDate.getDate(),
			'month': myDate.getMonth() + total,
			'week': toWeekDay(myDate.getDay()),
			'year': myDate.getFullYear()
		})
	}
	// return dayList;
	let length = dayList.length
	let arrOne = dayList[0]
	let arrLast = dayList[length - 1]
	let StartDate = arrOne.year.toString() + '-' + arrOne.month + '-' + arrOne.day
	let EndDate = arrLast.year.toString() + '-' + arrLast.month + '-' + arrLast.day
	return {
		dayList,
		StartDate,
		EndDate
	}
}

function toWeekDay(weekDay) { // 传入数据  讲一周的某一天返回成中文状态下的字符
	switch (weekDay) {
		case 1:
			return '一';
			break;
		case 2:
			return '二';
			break;
		case 3:
			return '三';
			break;
		case 4:
			return '四';
			break;
		case 5:
			return '五';
			break;
		case 6:
			return '六';
			break;
		case 0:
			return '日';
			break;
		default:
			break;
	}
	return '传入未知参数';
}
module.exports = {
	GetNowTime,
	GetPhone,
	weekDate
}

2.组件.vue

<template>
	<view>
		<view class="box">
			<scroll-view scroll-x="true">
				<block v-for="(item, index) in dayList" :key="index">
					<view class="dayTitle" :class="current == index ? 'select' : ''" @click="timeSelectd(index)">
						<view style="display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;">
							<view>{{ item.day }}</view>
							<view v-if="index == 0" style="font-size: 25upx;">今天</view>
							<view v-else style="font-size: 25upx;">星期{{ item.week }}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import Vue from 'vue';
import common from '../../common/common.js';
export default {
	data() {
		return {
			isShow: false,
			current: 0,
			dayList: [],
			xzTime: common.GetNowTime(new Date())
		};
	},
	onLoad() {
		this.dayList = common.weekDate().dayList;
	},
	methods: {
		// 日期选择
		timeSelectd(index) {
			this.current = index;
			let date = this.dayList[index].year + '-' + this.dayList[index].month + '-' + this.dayList[index].day;
			date = common.GetNowTime(new Date(date));
			this.xzTime = date;
			console.log(this.xzTime);
		}
	}
};
</script>

<style scoped>
.box {
	padding: 30upx;
}
scroll-view {
	padding: 20upx 0;
	width: 100%;
	white-space: nowrap;
}
.dayTitle {
	width: 120upx;
	height: 120upx;
	border-radius: 60upx;
	margin-left: 20upx;
	text-align: center;
	display: inline-block;
}
.select {
	color: #ffffff;
	background-color: #83cbac;
}
</style>

效果图

回到今天：

<template>
	<view>
		<view class="box">
			<scroll-view scroll-x="true" :scroll-left="scrollLeft" @scroll="scroll">
				<block v-for="(item, index) in dayList" :key="index">
					<view class="dayTitle" :class="current == index ? 'select' : ''" @click="timeSelectd(index)">
						<view style="display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;">
							<view>{{ item.day }}</view>
							<view v-if="index == 0" style="font-size: 25upx;">今天</view>
							<view v-else style="font-size: 25upx;">星期{{ item.week }}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<button type="default" @click="goToday">回到今天</button>
	</view>
</template>

<script>
import Vue from 'vue';
import common from '@/common/common.js';
export default {
	data() {
		return {
			isShow: false,
			current: 0,
			dayList: [],
			xzTime: common.GetNowTime(new Date()),
			scrollLeft: 0
		};
	},
	onLoad() {
		this.dayList = common.weekDate().dayList;
	},
	methods: {
		// 日期选择
		timeSelectd(index) {
			this.current = index;
			let date = this.dayList[index].year + '-' + this.dayList[index].month + '-' + this.dayList[index].day;
			date = common.GetNowTime(new Date(date));
			this.xzTime = date;
			console.log(this.xzTime);
		},
		scroll(e) {
			this.scrollLeft = e.detail.scrollLeft;
		},
		goToday() {
			this.current = 0;
			this.scrollLeft=0;
			this.xzTime=common.GetNowTime(new Date());
		}
	}
};
</script>