vue+elementUI日期选择器实现选择日期，自动对应周几

 之前在公司的项目里面遇到这个问题，如今想起来在这里总结一下，如果有更好的方法，请各位大神多多指教。

在template里面给选择日期的el-date-picker一个监听事件change，我定义的是toWeek事件，v-show根据自己项目的需求可以根据条件控制显示和隐藏，focus事件是选择日期有焦点的时候，实行一些事件操作

 <div class="block riqi" v-show=see><span class="check-add-del-span">日期</span><el-date-pickerv-model="gradeDate"@focus="riqi"type="date"placeholder="选择日期"format="yyyy年MM月dd日"value-format="yyyy-MM-dd"@change="toWeek"></el-date-picker></div>

在template中写显示日期和对应周几的表格table，我这里用的是elementUI里面的table组件，该组件的prop属性来接收获取到的数据，下面我定义的是label和timez，如下：

<el-table:data="timeData"style="width: 100%"><el-table-column width="80" label="周" fixed="left" prop="label" align="center" :formatter="week"> </el-table-column><el-table-column width="150" label="日期" prop="timez" align="center"></el-table-column>
</el-table>

还需在data里面声明一些变量，如下：

   data(){return{gradeDate:'',//所选择的日期timeData:[]//存放表格数据}}

在methods里面写toWeek事件，如下：

//监听点击日期对应周几toWeek(){var Setime = this.gradeDate; //给所选择的日期一个变量名var ji = new Date(Setime).getDay() //将日期转换成周var date = new Date(Setime); //指定在对象中存储的日期var timeList = []//  console.log(date)for(var i=1-ji;i<8-ji;i++){ //根据选定的星期进行循环一周var q = new Date(); //获取当前日期// console.log(i);let tt = q.setTime(date.getTime() + 3600 * 1000 * 24*i);//将当前日期设置成指定日期的前i天的毫秒日期let td = new Date(tt); //将获取到的毫秒日期指定到对象中存储let time = td.getFullYear() + "-" + (td.getMonth()+1) + "-" + td.getDate(); //将毫秒日期转为年月日格式// console.log(time);timeList.push(time) //将根据选择的日期循环出来一周的日期放进数组里面}   var that = this;that.$http.post('接口地址',{//参数，没有可以空着}).then(res=>{console.log(res.data.data);if(res.data.data!=undefined&&res.data.data.length>0){this.timeData=[];for(var i=0;i<res.data.data.length;i++){this.timeData.push({timez:timeList[i],//后台返回的数据是7条，下标就是0-6，刚好可以作为timelist的下标来取对应下面周几的日期label:res.data.data[i].weekday//后台返回的1-7，即周一到周日是固定显示的})}}else{this.$message.success('查询失败！');} }).catch(err =>{})                                  },

上面的代码是我和后台交互的时候来获取的周，如果不需要请求，只做那个效果的话可以这样：

  //监听点击日期对应周几toWeek(){var Setime = this.gradeDate; //给所选择的日期一个变量名var ji = new Date(Setime).getDay() //将日期转换成周var date = new Date(Setime); //指定在对象中存储的日期var timeList = []//  console.log(date)for(var i=1-ji;i<8-ji;i++){ //根据选定的星期进行循环一周var q = new Date(); //获取当前日期// console.log(i);let tt = q.setTime(date.getTime() + 3600 * 1000 * 24*i);//将当前日期设置成指定日期的前i天的毫秒日期let td = new Date(tt); //将获取到的毫秒日期指定到对象中存储let time = td.getFullYear() + "-" + (td.getMonth()+1) + "-" + td.getDate(); //将毫秒日期转为年月日格式// console.log(time);timeList.push(time) //将根据选择的日期循环出来一周的日期放进数组里面}this.timeData = [];for(var i=0;i<7;i++){this.timeData.push({timez:timeList[i],label:i+1})}},

table中显示周的prop:label接收到的数据是数字1-7，直接显示出来用户体验不好，所以用了table的一个属性:formatter，常常用来格式化内容：

Function(row, column, cellValue, index)

可以在methods里面写个事件:formatter=“week”，结合switch语句，如下：

 //周一到周日week(row,column){switch(row.label){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 7:return '周日';break;      }

以上完成后，页面上选择日期，表格里面显示的就是包含你所选择的日期的一周7天的日期和对应的周几了，鉴于是公司项目，就不方便截图展示了。
完结，不足之处可以给我指点指点哟。

vue+elementUI日期选择器实现选择日期，自动对应周几，并且是包含所选择日期的一周的日期相关推荐

Vue+elementUI时间选择器的应用
DatePicker 日期选择器日期选择器基本用法可参照官网的案例,这里记录一下精确到日的一个需求的相关实现. 需求说明:设置一个日期范围选择功能,默认显示近一个月的用户数据,不能选择当天. 需要注 ...
vue element-ui级联选择器选中后下拉框自动收起
Cascader 级联选择器数据渲染通过 :options="options" 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props="{ chec ...
electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏，electron+vue桌面应用项目框架搭建
1.与普通vue项目一样安装node.淘宝源等,然后再 electron官网:https://www.electronjs.org/ 安装electron: npm install electron ...
Vue elementui select选择器全选功能带搜索（左匹配）
效果图: <el-selectv-model="valuesList"multiplecollapse-tagsfilterable:filter-method=" ...
vue 日期面板_Vue实战：日期选择器
在日常工作中需要填写日期的时候,会用到日期选择器,来方便的进行日.月.年的选择.这里我们会用Vue来实现一个日期选择器,效果如下: 实现功能:日期选择弹出层选择天面板选择月面版选择年面版支持用 ...
日期选择器中禁用日期设置
相信很多网友现在都在用element-ui这个vue的ui框架,表单中几乎都会用到日期选择器这个控件,会遇到一种情况是只能选择后面的日期或是只能选择之前的日期,这时候你会发现element-ui的官方 ...
elemenUI 2.x：单选框控制日期选择器的切换
ElementUI 日期选择器的切换实现方式一:同一个日期组件,通过修改属性实现 <!DOCTYPE html> <html lang="en">< ...
js获取日期选择器值html,利用Query+bootstrap和js两种方式实现日期选择器
前言所谓日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变,本文介绍了利用Query+bootstrap和js实现日期选择器的 ...
如何使用Dojo的DatePicker控件制作联动日期选择器
在开发系统的调查功能时,需要设计一个可以联动的开始日期/结束日期选择器用来设定用户的调查的起始/结束日期.对于这个联动的日期选择器,我们的设计要求是这样的: 在新增调查时,该调查的开始日期默认为今天, ...
JavaFX日期选择器
JavaFX日期选择器 1. 需求设计 1.1 需求说明我需要一个可以实时返回当前时间段的一个日期选择器,支持过去十几分钟,几小时,几天等,并且支持自定义时间区间 1.2 设计草图 1.3 完成效果 ...

vue+elementUI日期选择器实现选择日期，自动对应周几，并且是包含所选择日期的一周的日期

vue+elementUI日期选择器实现选择日期，自动对应周几

vue+elementUI日期选择器实现选择日期，自动对应周几，并且是包含所选择日期的一周的日期相关推荐

最新文章

热门文章