写点什么

Vue 实现日期选择器

作者:游坦之
  • 2022-10-18
    山东
  • 本文字数:18247 字

    阅读完需:约 1 分钟

Vue实现日期选择器

前言

本以为这是一个很简单的功能,几分钟就搞定。没想到,还是很麻烦的!记录一下开发过程。


这里就涉及到了设计模式的一些知识,如果使用静态的代码,几乎 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
用户头像

游坦之

关注

还未添加个人签名 2022-10-14 加入

还未添加个人简介

评论

发布
暂无评论
Vue实现日期选择器_前端_游坦之_InfoQ写作社区