Vue 实现日期选择器
作者：游坦之
- 2022-10-18 山东
本文字数：18247 字
阅读完需：约 1 分钟
前言
本以为这是一个很简单的功能，几分钟就搞定。没想到，还是很麻烦的！记录一下开发过程。
这里就涉及到了设计模式的一些知识，如果使用静态的代码，几乎 1000 行，这样大学生 10W 的代码岂不是很容易完成？但如果采用动态的方式，估计至少要减少一半无用的代码，还没改掉。继续前进！
使用了 Element-ui 的 Select 选择器，不过似乎有些鸡肋，感觉用下拉框就可以解决了，而且饿了么 ui 的选择器感觉也不是很好看。
1 区分月份的天数
每个月的每一天都是不一样，大月 31 天，小月 30 天，二月最为特殊，平年 28 天，闰年 29 天。
科普时间：为什么隔三年二月就会多一天？
这个知识是我从汉书中得到答案的，一笑。汉朝的历法划分一年为 365.25 天，那么四年就会多出一天，这一天也就是闰年二月多出来的一天。
1.1 思路
这里用的很暴力的方式，每一个月份都用一个静态的数组赋值.
1.2 好处
新手都可以上手
操作简单，直接复制、粘贴，稍微改动即可，
1.3 缺点
可维护性差，改变一点东西，需要把全部月份的情况进行改动
代码冗长，可读性不好
1.4 效果
9 月份为 30 天
10 月份为 31 天
2 区分闰年和平年
2.1 思路
C++敲烂了的代码终于派上了用场
if(year%400==0||(year%4==0&&year%100!=0)){ cout<<"这是闰年";}else{ cout<<"这是平年";}
复制代码
3 年份月份修改导致的问题
如下图：1 月份有 31 天，但是 2 月最多只有 29 天，这个问题怎么解决？
3.1 思路
设置一个修改月份的函数，一个修改年份的函数。
当修改月份的时候，查看当前的 day 是否大于了该月份所有的最大的天数（这里也涉及了平闰年的问题），如果大于则将该天数设置为修改月份所有的最大天数。如果不大于则不须修改。修改年份的时候也会出现这种情况，当然只涉及 2 月。
也就有以下三种情况：
当前天数大于月份的最大天数，天数截取（如 1 月有 31 天，修改成 4 月，应变为 30 天），天数重置（如 1 月 31 日，月份变为 2 月，则天应该随之变为 30）
当前天数小于月份的最大天数，不动。
月份为 2，闰年平年转换，参考第一种情况解决。
3.2 效果图
4 禁用未到达的时间
4.1 思路
这个问题的解决是比较麻烦的，但也无非有一下几种情况
本年不显示未到的月数
本年不显示未到的天数（针对本月）
年份的改变导致月数、天数的变化
月份的转变导致天数的变化
4.2 效果图
代码
<template > <div class="firstmain"> <div id="app" class="big_main">
<div class="div_left"> <div class="left_header"> <div class="div_img"> <a href=""> <img src="@/assets/周杰伦.jpg" alt="" class="div_img_img1"> </a> </div> <div class="div_left_title"> <h2>风流宰相谢安</h2> </div> </div> <div class="div_column"> <div class="column_hostory"> <div class="column_core"> <router-link to="index" class="core_a"> <span>历史播放</span> </router-link> </div> </div> <div class="column_hostory"> <div class="column_core"> <router-link to="MyCollect" class="core_a"> <span>我的收藏</span> </router-link> </div> </div> <div class="column_hostory"> <div class="column_core"> <a href="" class="core_a"> <span>我的评论</span> </a> </div> </div> <div class="column_hostory"> <div class="column_core"> <router-link to="Personal" class="core_a"> <span style="color:#61f6ff;font-weight: 700;">个人信息</span> </router-link>> </div> </div> <div class="column_hostory"> <div class="column_core"> <router-link to="AccountSettting" class="core_a"> <span>账号设置</span> </router-link>> </div> </div> </div>
</div> <div class="div_main"> <!-- 头像栏 --> <div class="main_header"> <div class="header_img"> <el-upload class="avatar-uploader" action="#" :show-file-list="false"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> <div class="header_username"> <span>谢安不出，如苍生何!</span> </div> </div> <!-- 用户名栏 --> <div class="main_username"> <div class="title_tag"> 用户名: </div> <div class="title_info"> 风流宰相谢安 </div> </div> <!-- 性别栏 --> <div class="main_sex"> <div class="title_tag"> <span>性别</span> </div> <div class="title_info"> <input type="radio" value="男" name="sex">男 <input type="radio" value="女" name="sex">女 </div> </div> <!-- 出生年月栏 --> <div class="main_Birth"> <div class="title_tag"> <span>生日</span> </div> <div class="title_info"> <div class="Birth_year">
<el-select v-model="year" placeholder="2000" @change="changeYear()" class="year_select"> <el-option v-for="(item,index) in years" :key="index" :value="item.value"> </el-option> </el-select>
</div> <div class="Birth_month"> 年 <el-select v-model="month" placeholder="01" @change="changeMonth()" class="month_select"> <el-option v-for="(item,index) in months" :key="index" :value="item.value"> </el-option> </el-select> </div> <div class="Birth_day"> 月 <el-select v-model="day" placeholder="01" class="day_select"> <el-option v-for="(item,index) in days" :key="index" :value="item.value"> </el-option> </el-select>日 </div> </div> </div> <!-- 地址 --> <div class="main_address"> <div class="title_tag"> 地区 </div> <div class="title_info"> <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" style="width:310px;"> </el-cascader> </div> </div> <!-- 个人简介 --> <div class="main_introduction"> <div class="title_tag">个人简介</div> <div class="title_info"> 江湖不是打打杀杀，那江湖是人情世故！ </div> </div> </div> </div> </div></template> <script>import { regionData } from 'element-china-area-data'export default { name: 'Personal', data() { return { options: regionData, selectedOptions: [], SheetsInfo: [], sliceSheet: [], current_page: 1, page_size: 15, Info: '', errorImg01: 'this.src="' + require('@/assets/迪迦.gif') + '"', imageUrl: '', year: '2000', day: '01', month: '01', years: [{
value: '2022' }, {
value: '2021' }, {
value: '2020' }, {
value: '2019' }, {
value: '2018' }, { value: '2017' }, { value: '2016' }, { value: '2015' }, { value: '2014' }, { value: '2013' }, { value: '2012' }, { value: '2011' }, { value: '2010' }, { value: '2009' }, { value: '2008' }, { value: '2007' }, { value: '2006' }, { value: '2005' }, { value: '2004' }, { value: '2003' }, { value: '2002' }, { value: '2001' }, { value: '2000' }, { value: '1999' }, { value: '1998' }, { value: '1997' }, { value: '1996' }, { value: '1995' }, { value: '1994' }, { value: '1993' }, { value: '1992' }, { value: '1991' }, { value: '1990' }, { value: '1989' }, { value: '1988' }, { value: '1987' }, { value: '1986' }, { value: '1985' }, { value: '1984' }, { value: '1983' }, { value: '1982' }, { value: '1981' }, { value: '1980' }, { value: '1979' }, { value: '1978' }, { value: '1977' }, { value: '1976' }, { value: '1975' }, { value: '1974' }, { value: '1973' }, { value: '1972' }, { value: '1971' }, { value: '1970' }, { value: '1969' }, { value: '1968' }, { value: '1967' }, { value: '1966' }, { value: '1965' }, { value: '1964' }, { value: '1963' }, { value: '1962' }, { value: '1961' }, { value: '1960' }, { value: '1959' }, { value: '1958' }, { value: '1957' }, { value: '1956' }, { value: '1955' }, { value: '1954' }, { value: '1953' }, { value: '1952' }, { value: '1951' }, { value: '1950' }, { value: '1949' }, { value: '1948' }, { value: '1947' }, { value: '1946' }, { value: '1945' }, { value: '1944' }, { value: '1943' }, { value: '1942' }, { value: '1941' }, { value: '1940' }, { value: '1939' }, { value: '1938' }, { value: '1937' }, { value: '1936' }, { value: '1935' }, { value: '1934' }, { value: '1933' }, { value: '1932' }, { value: '1931' }, { value: '1930' }, { value: '1929' }, { value: '1928' }, { value: '1927' }, { value: '1926' }, { value: '1925' }, { value: '1924' }, { value: '1923' }, { value: '1922' }, { value: '1921' }, { value: '1920' }, { value: '1919' }, { value: '1918' }, { value: '1917' }, { value: '1916' }, { value: '1915' }, { value: '1914' }, { value: '1913' }, { value: '1912' }, { value: '1911' }, { value: '1910' },
], value: '', months: [ { value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, ], copy_months: [ { value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, ], days: [ { value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, { value: '13' }, { value: '14' }, { value: '15' }, { value: '16' }, { value: '17' }, { value: '18' }, { value: '19' }, { value: '20' }, { value: '21' }, { value: '22' }, { value: '23' }, { value: '24' }, { value: '25' }, { value: '26' }, { value: '27' }, { value: '28' }, { value: '29' }, { value: '30' }, { value: '31' },
] } }, methods: { handleAvatarSuccess(res, file) { this.imageUrl = URL.createObjectURL(file.raw); console.log("获取的数据是:" + this.imageUrl); }, beforeAvatarUpload(file) { console.log("获取的数据为:" + file.raw); const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; }, handleChange(value) { console.log(value) }, handleCurrentChange(val) { console.log(`当前处于${val}页`)
var temp = (val - 1) * this.page_size;
if (temp + this.page_size < this.SheetsInfo.length) this.sliceSheet = this.SheetsInfo.slice(temp, temp + this.page_size) else { this.sliceSheet = this.SheetsInfo.slice(temp, this.SheetsInfo.length) }
}, getSearchInfo() { this.Info = "吕"; this.getAllOpreasOfSheet(this.Info);
}, async getAllOpreasOfSheet(params) { console.log("这个参数是:" + params); let result = await this.$API.reqGetAllOpreaOfInfoTwo(params); if (result == "") { console.log("这个结果是空的"); } else { this.SheetsInfo = result; this.index = this.SheetsInfo.length; if (this.SheetsInfo.length > 0) { this.sliceSheet = this.SheetsInfo.slice(0, this.page_size); } }
}, changeYear() { let y = this.year - 0; if (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0)) { if (this.month == 2 && this.day > 29) { this.day = 29; this.days = [ { value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, { value: '13' }, { value: '14' }, { value: '15' }, { value: '16' }, { value: '17' }, { value: '18' }, { value: '19' }, { value: '20' }, { value: '21' }, { value: '22' }, { value: '23' }, { value: '24' }, { value: '25' }, { value: '26' }, { value: '27' }, { value: '28' }, { value: '29' }, ] } } else { if (this.month == 2 && this.day > 28) { this.day = 28; this.days = [ { value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, { value: '13' }, { value: '14' }, { value: '15' }, { value: '16' }, { value: '17' }, { value: '18' }, { value: '19' }, { value: '20' }, { value: '21' }, { value: '22' }, { value: '23' }, { value: '24' }, { value: '25' }, { value: '26' }, { value: '27' }, { value: '28' }, ] } } let date = new Date(); let now_year = date.getFullYear(); // 月份是从0获取的所以要+1 let now_month = date.getMonth() + 1; let now_day = date.getDate(); if (y == now_year) { if (this.month > now_month) { if (now_month < 10) { this.month = "0" + now_month; } else { this.month = now_month;
}
this.day = '01'; }
this.months = this.copy_months.slice(0, now_month); } else { this.months = this.copy_months; } var m = this.month; if (now_year == this.year && now_month == this.month) { if (this.day > now_day) { this.day = now_day; } this.days = this.days.slice(0, now_day); } else { if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) { this.days = [{ value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, { value: '13' }, { value: '14' }, { value: '15' }, { value: '16' }, { value: '17' }, { value: '18' }, { value: '19' }, { value: '20' }, { value: '21' }, { value: '22' }, { value: '23' }, { value: '24' }, { value: '25' }, { value: '26' }, { value: '27' }, { value: '28' }, { value: '29' }, { value: '30' }, { value: '31' }, ] } else if (m == 2) { let y = this.year - 0; if (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0)) { if (this.day > 29) { this.day = 29; } this.days = [ { value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, { value: '13' }, { value: '14' }, { value: '15' }, { value: '16' }, { value: '17' }, { value: '18' }, { value: '19' }, { value: '20' }, { value: '21' }, { value: '22' }, { value: '23' }, { value: '24' }, { value: '25' }, { value: '26' }, { value: '27' }, { value: '28' }, { value: '29' }, ] } else { if (this.day > 28) { this.day = 28; } this.days = [ { value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, { value: '13' }, { value: '14' }, { value: '15' }, { value: '16' }, { value: '17' }, { value: '18' }, { value: '19' }, { value: '20' }, { value: '21' }, { value: '22' }, { value: '23' }, { value: '24' }, { value: '25' }, { value: '26' }, { value: '27' }, { value: '28' }, ] }
} else { if (this.day > 30) { this.day = 30;
}
this.days = [ { value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, { value: '13' }, { value: '14' }, { value: '15' }, { value: '16' }, { value: '17' }, { value: '18' }, { value: '19' }, { value: '20' }, { value: '21' }, { value: '22' }, { value: '23' }, { value: '24' }, { value: '25' }, { value: '26' }, { value: '27' }, { value: '28' }, { value: '29' }, { value: '30' }, ]
} } }, changeMonth() { let m = this.month - 0; let date = new Date(); let now_year = date.getFullYear(); // 月份是从0获取的所以要+1 let now_month = date.getMonth() + 1; let now_day = date.getDate(); if (now_year == this.year && now_month == this.month) { if (this.day > now_day) { this.day = now_day; } this.days = this.days.slice(0, now_day); } else { if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) { this.days = [{ value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, { value: '13' }, { value: '14' }, { value: '15' }, { value: '16' }, { value: '17' }, { value: '18' }, { value: '19' }, { value: '20' }, { value: '21' }, { value: '22' }, { value: '23' }, { value: '24' }, { value: '25' }, { value: '26' }, { value: '27' }, { value: '28' }, { value: '29' }, { value: '30' }, { value: '31' }, ] } else if (m == 2) { let y = this.year - 0; if (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0)) { if (this.day > 29) { this.day = 29; } this.days = [ { value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, { value: '13' }, { value: '14' }, { value: '15' }, { value: '16' }, { value: '17' }, { value: '18' }, { value: '19' }, { value: '20' }, { value: '21' }, { value: '22' }, { value: '23' }, { value: '24' }, { value: '25' }, { value: '26' }, { value: '27' }, { value: '28' }, { value: '29' }, ] } else { if (this.day > 28) { this.day = 28; } this.days = [ { value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, { value: '13' }, { value: '14' }, { value: '15' }, { value: '16' }, { value: '17' }, { value: '18' }, { value: '19' }, { value: '20' }, { value: '21' }, { value: '22' }, { value: '23' }, { value: '24' }, { value: '25' }, { value: '26' }, { value: '27' }, { value: '28' }, ] }
} else { if (this.day > 30) { this.day = 30;
}
this.days = [ { value: '01' }, { value: '02' }, { value: '03' }, { value: '04' }, { value: '05' }, { value: '06' }, { value: '07' }, { value: '08' }, { value: '09' }, { value: '10' }, { value: '11' }, { value: '12' }, { value: '13' }, { value: '14' }, { value: '15' }, { value: '16' }, { value: '17' }, { value: '18' }, { value: '19' }, { value: '20' }, { value: '21' }, { value: '22' }, { value: '23' }, { value: '24' }, { value: '25' }, { value: '26' }, { value: '27' }, { value: '28' }, { value: '29' }, { value: '30' }, ]
} } }
} , mounted() { this.getSearchInfo(); }}</script><style scoped>.firstmain { width: 100%; height: 1000px;
position: relative;}
.big_main { width: 65%; height: 1000px; margin: 0px auto;
margin-top: 2px;}
.main_title { margin-left: 10px;}
.div_left { width: 15%; height: 800px; border-radius: 7px; background-color: #34777d; background-image: linear-gradient(180deg, #34777d 0%, #0f1f47 100%); position: absolute; top: 60px; float: left;
}
.left_header { height: 200px; background-color: #346064; background-image: linear-gradient(180deg, #346064 0%, #4c0c22 100%);
border-radius: 7px 7px 0px 0px;}
.div_column { margin-top: 30px;}
.main_sex { height: 6%; margin-top: 30px;}
.main_Birth { height: 6%; margin-top: 30px;}
.Birth_year { width: 85px; float: left;}
.year_select { width: 80px;}
.Birth_month { width: 105px; float: left;}
.month_select { width: 80px;}
.Birth_day { width: 120px; float: left;}
.day_select { width: 80px;}
.div_img { width: 80px; height: 80px; margin: 0px auto; padding-top: 40px;
}
.div_img_img1 { width: 80px; height: 80px; border-radius: 50%;
}
.div_left_title {
text-align: center; color: white; margin-top: 10px;}
.div_left_title h2 { font-size: 15px;}
.column_hostory { text-align: center; vertical-align: middle; width: 100%; height: 60px; /* border: 1px solid red; */}
.column_core { width: 60%; height: 40px; margin: 0px auto; /* border: 1px solid blue; */ line-height: 40px; margin-top: 10px;}
.core_a { text-decoration: none; color: white; font-size: 20px;}
.core_a:hover { color: #0D9BFF;}
.title_tag { float: left; width: 23%; margin-left: 8%; font-weight: 600;}
.title_info { float: left; width: 50%;}
.div_main { width: 60%; height: 800px; /* background-color: #0f1f47; */ position: absolute; top: 60px; left: 33%; border: 1px solid rebeccapurple; float: right;}
.main_header { width: 100%; height: 25%; /* border: 1px solid #0D9BFF; */}
.main_username { width: 100%; margin-top: 30px;
height: 6%;
}
.main_address { height: 6%; margin-top: 30px;}
.username1 { font-size: 20px; float: left;
}
.username2 { font-size: 20px; float: left;
}
/* 上传头像 */.avatar-uploader,.el-upload { border: 1px dashed #827777; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;}
.avatar-uploader .el-upload:hover { border-color: #409EFF;}
.avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;}
.avatar { width: 178px; height: 178px; display: block;}
.header_img { margin-left: 10px; margin-top: 10px; width: 178px; height: 178px;}
/* 上传头像 */.header_img { float: left;}
.header_username { margin-left: 10%; width: 60%; height: 50px; /* background-color: #0D9BFF; */ float: left; margin-top: 10%; font-size: 20px; font-weight: 600;}
.main_introduction { height: 6%; margin-top: 30px;}</style>
width: 100%; margin-top: 30px;
height: 6%;
}
.main_address { height: 6%; margin-top: 30px;}
.username1 { font-size: 20px; float: left;
}
.username2 { font-size: 20px; float: left;
}
/* 上传头像 */.avatar-uploader,.el-upload { border: 1px dashed #827777; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;}
.avatar-uploader .el-upload:hover { border-color: #409EFF;}
.avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;}
.avatar { width: 178px; height: 178px; display: block;}
.header_img { margin-left: 10px; margin-top: 10px; width: 178px; height: 178px;}
/* 上传头像 */.header_img { float: left;}
.header_username { margin-left: 10%; width: 60%; height: 50px; /* background-color: #0D9BFF; */ float: left; margin-top: 10%; font-size: 20px; font-weight: 600;}
.main_introduction { height: 6%; margin-top: 30px;}</style>
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 3
版权声明: 本文为 InfoQ 作者【游坦之】的原创文章。
原文链接:【http://xie.infoq.cn/article/9218847a3fe78de65966f0a28】。文章转载请联系作者。
游坦之
关注
还未添加个人签名 2022-10-14 加入
还未添加个人简介
评论