vue實現(xiàn)周日歷切換效果

更新時間：2022年04月18日 11:37:58 作者：weixin_44353999

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)周日歷切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)周日歷切換效果的具體代碼，供大家參考，具體內(nèi)容如下

廢話不多說，直接上干貨，需要的朋友自取

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>周日歷</title>
? ? <!-- 引入組件樣式 -->
? ? <link rel="stylesheet"  >
</head>
<body>
? ? <div id="app">
? ? ? ? <!-- 上面的日歷 -->
? ? ? ? <div class="calendar">
? ? ? ? ? ? <div class="arrow">
? ? ? ? ? ? ? ? <i class="el-icon-arrow-left" @click="arrow('left')"></i>
? ? ? ? ? ? ? ? <i class="el-icon-arrow-right" @click="arrow('right')"></i>
? ? ? ? ? ? </div>
? ? ? ? ? ? <el-calendar v-model="value" :range="dateRange"></el-calendar>
? ? ? ? </div>
? ? ? ? <!-- 下面的日歷 -->
? ? ? ? <div class="date">
? ? ? ? ? ? <div class="arrow0">
? ? ? ? ? ? ? ? <i class="el-icon-arrow-left" @click="weekPre"></i>
? ? ? ? ? ? ? ? <i class="el-icon-arrow-right" @click="weekNext"></i>
? ? ? ? ? ? </div>
? ? ? ? ? ? <!-- 年份 月份 -->
? ? ? ? ? ? <div class="month">
? ? ? ? ? ? ? ? <p>{{ currentYear }}年{{ currentMonth }}月</p>
? ? ? ? ? ? </div>
? ? ? ? ? ? <!-- 星期 -->
? ? ? ? ? ? <ul class="weekdays">
? ? ? ? ? ? ? ? <li>一</li>
? ? ? ? ? ? ? ? <li>二</li>
? ? ? ? ? ? ? ? <li>三</li>
? ? ? ? ? ? ? ? <li>四</li>
? ? ? ? ? ? ? ? <li>五</li>
? ? ? ? ? ? ? ? <li>六</li>
? ? ? ? ? ? ? ? <li>日</li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <!-- 日期 -->
? ? ? ? ? ? <ul class="days">
? ? ? ? ? ? ? ? <li @click="pick(day)" v-for="(day, index) in days" :key="index">
? ? ? ? ? ? ? ? ? ? <!--本月-->
? ? ? ? ? ? ? ? ? ? <span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
? ? ? ? ? ? ? ? ? ? <span v-else>
? ? ? ? ? ? ? ? ? ? <!--今天-->
? ? ? ? ? ? ? ? ? ? ? ? <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
? ? ? ? ? ? ? ? ? ? ? ? <span v-else>{{ day.getDate() }}</span>
? ? ? ? ? ? ? ? ? ? </span>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
</body>
<!-- 引入vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
? ? new Vue({
? ? el: '#app',
? ? data: function() {
? ? ? ? ? ? return {?
? ? ? ? ? ? ? ? // 上
? ? ? ? ? ? ? ? value: "",
? ? ? ? ? ? ? ? endDate: "",
? ? ? ? ? ? ? ? dateRange: [],
? ? ? ? ? ? ? ? dateNum: 0,
? ? ? ? ? ? ? ? // 下
? ? ? ? ? ? ? ? currentYear: "", ? // 年份
? ? ? ? ? ? ? ? currentMonth: "", ?// 月份
? ? ? ? ? ? ? ? currentDay: "", ? ?// 日期
? ? ? ? ? ? ? ? currentWeek: "", ? ?// 星期
? ? ? ? ? ? ? ? days: [],
? ? ? ? ? ? }
? ? ? ? },
? ? mounted () {
? ? ?
? ? },
? ? created () {
? ? ? ? // 上面的日歷
? ? ? ? this.dateList(this.dateNum);
? ? ? ? console.log(this.dateRange);
? ? ? ? // 下面的日歷
? ? ? ? this.initData();
? ? },
? ? methods: {
? ? ? ? // 上面的日歷
?
? ? ? ? // 獲取當(dāng)前時間的周一
? ? ? ? getMonday(date) {
? ? ? ? ? ? var day = date.getDay();
? ? ? ? ? ? var deltaDay;
? ? ? ? ? ? if (day == 0) {
? ? ? ? ? ? ? ? deltaDay = 6;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? deltaDay = day - 1;
? ? ? ? ? ? }
? ? ? ? ? ? var monday = new Date(date.getTime() - deltaDay * 24 * 60 * 60 * 1000);
? ? ? ? ? ? monday.setHours(0);
? ? ? ? ? ? monday.setMinutes(0);
? ? ? ? ? ? monday.setSeconds(0);
? ? ? ? ? ? return monday; //返回選定時間的周一的0時0分0秒
? ? ? ? },
? ? ? ? getDateNew(time) {
? ? ? ? ? ? console.log(time);
? ? ? ? ? ? let times = new Date(time);
? ? ? ? ? ? let year = times.getFullYear();
? ? ? ? ? ? let month = times.getMonth() + 1 < 10 ? "0" + (times.getMonth() * 1 + 1) : times.getMonth() * 1 + 1;
? ? ? ? ? ? let day = times.getDate() < 10 ? "0" + times.getDate() * 1 : times.getDate() * 1;
? ? ? ? ? ? return year + "-" + month + "-" + day;
? ? ? ? },
? ? ? ? dateList(delta) {
? ? ? ? ? ? //將時間對象轉(zhuǎn)換為時間戳并加幾天后轉(zhuǎn)換為時間對象
? ? ? ? ? ? var DateNews = this.getMonday(
? ? ? ? ? ? ? ? new Date((new Date().getTime() / 1000 + 86400 * 7 * delta) * 1000)
? ? ? ? ? ? );
? ? ? ? ? ? let startDate = this.getDateNew(DateNews, delta);
? ? ? ? ? ? this.endDate = this.getDateNew(
? ? ? ? ? ? ? ? new Date((DateNews.getTime() / 1000 + 6 * 86400) * 1000)
? ? ? ? ? ? );
? ? ? ? ? ? this.dateRange = [startDate, this.endDate];
? ? ? ? },
? ? ? ? arrow(arrow) {
? ? ? ? ? ? if (arrow == "left") {
? ? ? ? ? ? ? ? this.dateNum--;
? ? ? ? ? ? ? ? this.dateList(this.dateNum);
? ? ? ? ? ? } else if (arrow == "right") {
? ? ? ? ? ? ? ? this.dateNum++;
? ? ? ? ? ? ? ? this.dateList(this.dateNum);
? ? ? ? ? ? }
? ? ? ? },
?
? ? ? ? // 下面的日歷
?
? ? ? ? formatDate (year, month, day) {
? ? ? ? ? ? const y = year
? ? ? ? ? ? let m = month
? ? ? ? ? ? if (m < 10) m = `0${m}`
? ? ? ? ? ? let d = day
? ? ? ? ? ? if (d < 10) d = `0$vvxyksv9kd`
? ? ? ? ? ? return `${y}-${m}-$vvxyksv9kd`
? ? ? ? },
? ? ? ? initData (cur) {
? ? ? ? ? ? let date = ''
? ? ? ? ? ? if (cur) {
? ? ? ? ? ? ? ? date = new Date(cur)
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? date = new Date()
? ? ? ? ? ? }
? ? ? ? ? ? this.currentDay = date.getDate() ? ? ? ? ?// 今日日期 幾號
? ? ? ? ? ? this.currentYear = date.getFullYear() ? ? ? // 當(dāng)前年份
? ? ? ? ? ? this.currentMonth = date.getMonth() + 1 ? ?// 當(dāng)前月份
? ? ? ? ? ? this.currentWeek = date.getDay() // 1...6,0 ? // 星期幾
? ? ? ? ? ? if (this.currentWeek === 0) {
? ? ? ? ? ? ? ? this.currentWeek = 7
? ? ? ? ? ? }
? ? ? ? ? ? const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay) // 今日日期 年-月-日
? ? ? ? ? ? this.days.length = 0
? ? ? ? ? ? // 今天是周日，放在第一行第7個位置，前面6個 這里默認(rèn)顯示一周，如果需要顯示一個月，則第二個循環(huán)為 i<= 35- this.currentWeek
? ? ? ? ? ? /* eslint-disabled */
? ? ? ? ? ? for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
? ? ? ? ? ? ? ? const d = new Date(str)
? ? ? ? ? ? ? ? d.setDate(d.getDate() - i)
? ? ? ? ? ? ? ? // console.log(y:" + d.getDate())
? ? ? ? ? ? ? ? this.days.push(d)
? ? ? ? ? ? }
? ? ? ? ? ? for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
? ? ? ? ? ? ? ? const d = new Date(str)
? ? ? ? ? ? ? ? d.setDate(d.getDate() + i)
? ? ? ? ? ? ? ? this.days.push(d)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? // ?上個星期
? ? ? ? weekPre () {
? ? ? ? ? ? const d = this.days[0] ? ?// 如果當(dāng)期日期是7號或者小于7號
? ? ? ? ? ? d.setDate(d.getDate() - 7)
? ? ? ? ? ? this.initData(d)
? ? ? ? },
? ? ? ? // ?下個星期
? ? ? ? weekNext () {
? ? ? ? ? ? const d = this.days[6] ? ?// 如果當(dāng)期日期是7號或者小于7號
? ? ? ? ? ? d.setDate(d.getDate() + 7)
? ? ? ? ? ? this.initData(d)
? ? ? ? },
? ? ? ? // 上一個月 ? 傳入當(dāng)前年份和月份
? ? ? ? pickPre (year, month) {
? ? ? ? ? ? const d = new Date(this.formatDate(year, month, 1))
? ? ? ? ? ? d.setDate(0)
? ? ? ? ? ? this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
? ? ? ? },
? ? ? ? // 下一個月 ? 傳入當(dāng)前年份和月份
? ? ? ? pickNext (year, month) {
? ? ? ? ? ? const d = new Date(this.formatDate(year, month, 1))
? ? ? ? ? ? d.setDate(35)
? ? ? ? ? ? this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
? ? ? ? },
? ? ? ? // 當(dāng)前選擇日期
? ? ? ? pick (date) {
? ? ? ? ? ? alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
? ? ? ? },
? ? },
}) ? ?
</script>
<style lang="scss">
? ? #app {
? ? ? ? width: 40%;
? ? ? ? margin: auto;
? ? }
? ? ul {
? ? ? ? padding: 0;
? ? }
? ? li {
? ? ? ? list-style-type: none;
? ? }
? ? /* 上面的日歷 */
? ? .calendar {
? ? ? ? position: relative;
? ? ? ? width: 100%;
? ? ? ? background: #fff;
? ? ? ? margin-top: 20px;
? ? ? ? margin-left: 20px;
? ? }
? ? .el-calendar__header {
? ? ? ? display: block;
? ? }
? ? .el-calendar-table .el-calendar-day {
? ? ? ? height: auto;
? ? ? ? text-align: center;
? ? }
? ? .el-calendar-table td.is-selected {
? ? ? ? background-color: #24b18d;
? ? ? ? color: #fff;
? ? }
? ? .el-calendar-table .el-calendar-day:hover {
? ? ? ? background-color: #24b18d;
? ? ? ? color: #fff;
? ? }
? ? .el-calendar-table {
? ? ? ? border-bottom: 1px solid #e4e4e4;
? ? ? ? padding-bottom: 15px;
? ? }
? ? .el-calendar-table .next {
? ? ? ? color: rgb(143, 143, 143);
? ? }
? ? .el-calendar__title,.el-calendar__button-group {
? ? ? ? text-align: center;
? ? }
? ? .arrow {
? ? ? ? width: 100%;
? ? ? ? max-height: 46px;
? ? ? ? position: absolute;
? ? ? ? top: 15px;
? ? ? ? text-align: center;
? ? }
? ? .arrow i {
? ? ? ? font-size: 20px;
? ? ? ? cursor: pointer;
? ? }
? ? .arrow i:nth-child(1) {
? ? ? ? margin-right: 10%;
? ? ? ? text-align: left;
? ? }
? ? .arrow i:nth-child(2) {
? ? ? ? margin-left: 10%;
? ? ? ? text-align: right;
? ? }
?
? ? /* 下面的日歷 */
? ? .date {
? ? ? ? position: relative;
? ? ? ? margin-top: 20px;
? ? ? ? padding: 10px 20px;
? ? ? ? background-color: #D3D3D3;
? ? }
? ? .arrow0 {
? ? ? ? width: 100%;
? ? ? ? max-height: 46px;
? ? ? ? position: absolute;
? ? ? ? top: 27px;
? ? ? ? left: 0px;
? ? ? ? text-align: center;
? ? }
? ? .arrow0 i {
? ? ? ? font-size: 20px;
? ? ? ? cursor: pointer;
? ? }
? ? .arrow0 i:nth-child(1) {
? ? ? ? margin-right: 10%;
? ? ? ? text-align: left;
? ? }
? ? .arrow0 i:nth-child(2) {
? ? ? ? margin-left: 10%;
? ? ? ? text-align: right;
? ? }
? ? .month {
? ? ? ? text-align: center;
? ? } ?
? ? .weekdays {
? ? ? ? display: flex;
? ? }?
? ? .weekdays li {
? ? ? ? flex: 1;
? ? ? ? text-align: center;
? ? }?
? ? .days {
? ? ? ? display: flex;
? ? }?
? ? .days li {
? ? ? ? flex: 1;
? ? ? ? text-align: center;
? ? ? ? cursor: pointer;
? ? }?
? ? .days li span {
? ? ? ? display: inline-block;
? ? ? ? width: 22px;
? ? ? ? height: 22px;
? ? }
? ? .days li span:hover {
? ? ? ? color: #fff;
? ? ? ? background-color: #409EFF;
? ? ? ? border-radius: 50%;
? ? }
? ? .active {
? ? ? ? display: inline-block;
? ? ? ? color: #fff;
? ? ? ? border-radius: 50%;
? ? ? ? background-color: #fa6854!important;
? ? }?
? ? .other-month {
? ? ? ? color: #e4393c;
? ? } ??
</style>
</html>

第二種日歷的實現(xiàn)方式

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: