Vue+js 实现左右滑动的日历效果，并显示年月日

  本文实例为大家分享了js日历左右滑动效果的具体代码，供大家参考，具体内容如下

 效果图：

本来最初的需求是要左右滑动，大家都懂得，后来产品改变需求，变成固定显示一周。但是只需要修改一个小小的地方就实现啦。

上图是在手机端展示的Vue模块

		<view class="calendar">
			<view class="year">
				<text>{{year}}年<text>{{month}}</text>月</text>
			</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>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>

接下来是js部分:

<script>
	import common from '@/common/common.js';
	export default {
			data() {
				return {
				year:'2020',
				month:"10",
				xzTime: common.GetNowTime(new Date()),
                                current: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.year=this.dayList[index].year;
				this.month=this.dayList[index].month;
				this.xzTime = date;
			      // console.log(this.xzTime);
			},
			 
	     }
	}
</script>

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();
	 // var myDate = new Date('1970-01-01 00:00:00');
	
	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 < 7; 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 = new Date('1970-01-01 00:00:00')
	  // let StartDate = arrOne.year.toString() + '-' + arrOne.month + '-' + arrOne.day
	  let EndDate = arrLast.year.toString() + '-' + arrLast.month + '-' + arrLast.day
	// console.log(EndDate)
 console.log(StartDate)
	
	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,
}

	for (var i = 0; i < 7; i++) {
		myDate.setDate(myDate.getDate() + total); // number 是最近几天  则会自动计算
		// 需求  月份-日   星期几     
		dayList.push({
			'day': myDate.getDate(),
			'month': myDate.getMonth() + total,
			'week': toWeekDay(myDate.getDay()),
			'year': myDate.getFullYear()
		})
	}
	这个for里面的循环次数越多就向右滑动越多哦，我这个需求只需要显示一周，所以只有7次，不过这个
     适用于很多次的循环次数，具体什么原因，大家懂得。

 好了这样一个小小的时间滑动功能就写完了，因为是在项目中使用的，所以亲测可行。

码字不易，如果感觉还不错，点个赞，加个关注呗！！！