JavaScript 自定义年月日选择下拉框select选择的日期方法vue实现

JavaScript 自定义选择年月日，需求如下图所示：

代码示例如下：

<div class="select-box"><span class="item"><select v-model="formData.year"><option v-for="item in year" :value="item">{{item}}年</option></select></span><span class="item" @change="getDay"><select  v-model="formData.month"><option v-for="item in month" :value="item">{{item}}月</option></select></span><span class="item"><select  v-model="formData.day" ><option v-for="item in day" :value="item">{{item}}日</option></select></span>
</div>
<div><a class="btn-submit btn-submit-s" @click="submit"></a></div>

js:

export default {data() {return {year:[],month:[],day:[],formData:{year:2019,month:1,day:1},}},methods: {init(){this.getYear();this.getMonth();this.getDay();},getYear(){//获取年let date = new Date;let current_year = date.getFullYear();for (let i = 0; i < 100; i++) {let y = current_year - i;this.year.push(y);}},getMonth(){//获取月for (let i = 1; i < 13; i++) {this.month.push(i);}},getDay(){//获取日this.day = [];let day = this.getDaysInMonth(this.formData.year, this.formData.month)for (let i = 1; i <= day ; i++) {this.day.push(i);}},getDaysInMonth(year, month) {//获取某个月的天数month = parseInt(month, 10);let d = new Date(year, month, 0);return d.getDate();},padding0(num, length) {//数字前填充0方法for(let len = (num + "").length; len < length; len = num.length) {num = "0" + num;            }return num;},submit(){//提交      let birthday = this.formData.year +"-" + this.padding0(this.formData.month,2) +"-" + this.padding0(this.formData.day,2);let cur_date = new Date();if(cur_date < new Date(birthday)){alert("请选择小于今天的年月日");return;}console.log(birthday);//birthday就是得到的最终的日期，格式为2019-01-01}},mounted() {this.init();}
}

JavaScript 自定义年月日选择下拉框select选择的日期方法vue实现相关推荐

下拉选框样式html,超酷select选择下拉框美化jQuery插件
jquery-nice-select是一款轻量级的select下拉选择框美化jQuery插件.该插件可以将原生的select元素转换为自定义样式的下拉选择框,并且在选择时带有很酷的CSS3过渡动画效果 ...
手机端自定义简单的下拉动画效果选择框解决过渡失效
手机端自定义简单的下拉动画效果选择框解决过渡失效 <template> // 弹出框触发并显示选择结果<view class="header_top_sel" ...
js填充select下拉框并选择默认值
/* 使用json数组填充下拉框并复选 *//* 初始化下拉框数据 */ var jsonStr = { "data": [] }; for (var str in JsonStr ...
获取下拉框select上次选择的值
获取下拉框select上次选择的值如图所示,如果我们需要获取select的当前选中项,直接用on-change事件直接返回就行,但有些情况下,我们需要获取上一次选中的值来做一些判断: <Row ...
html select不允许选择,设置select下拉框不能选择
今天在做一个小功能的时候,需要对特定的一个select设置禁止选择,只好采用js进行控制,接下来吾爱编程为大家介绍一下设置select下拉框不能选择的方法,有需要的小伙伴可以参考一下: 1.功能需求: ...
html下拉框只选择年份和月份,有只显示年和月的javascript时间控件吗？
//包含js文件 (1)只选择日期 (2)选择日期和小时 (3)选择日期和小时及分钟 //调用函数这下面是setmonth.js 这是Calendar.js /**//** *本日历选择控件由tia ...
python selenium 下拉框选择_【selenium】基于python语言，如何用select选择下拉框
在项目测试中遇到了下拉框选择的控件,来总结下如何使用select选择下拉框: 下图是Select类的初始化描述,意思是,给定元素是得是select类型,不是就抛异常.接下来给了例子:要操作这个sele ...
【项目实战】select+input实现下拉框左右选择+模糊查询功能
前言: 在项目中用遇到下拉框左右选择的需求,而easyui没有找到合适的插件,就想着用listbox来实现,但后来针对这个项目中没有想到合适的办法(ps:大家有了可以推荐哟),从网上看了一些demo, ...
html年月日下拉联动菜单年月日三下拉框联动
<html> <head> <title>年月日三下拉框联动</title> <meta http-equiv='Content-Type' co ...

JavaScript 自定义年月日选择下拉框select选择的日期方法vue实现

JavaScript 自定义年月日选择下拉框select选择的日期方法vue实现相关推荐

最新文章

热门文章