vue 根据选择的月份动态展示日期对应的星期几


Posted in Vue.js onFebruary 06, 2021

我等卑微的码农,依旧还得唱着“你我皆凡人,生在人世间,终日奔波苦,一刻不得闲,既然不是仙,难免有杂念,烦恼放两旁,工资摆中间,多少男子汉,秃顶又肥胖,加班的日夜,没有买保险”。

虽一直反抗,却从未奏效。大老板们是梦想照进现实,我等是梦想撞见黑锅!

牢骚了那么多,锅还得背,班还得加,code还得继续码!!!

来,把标题中所提到的这个效果给实现一下吧。

原理其实很简单,先得有一个选择年月的输入框吧,这里我用的是Element的DatePicker日期选择器组件,具体使用方法不多说,自己去看Element的API吧。

vue 根据选择的月份动态展示日期对应的星期几

然后就是根据选择的月份来动态显示当前月份的每一天了,这里用到了日期对象的两个方法:setMonth和setDate。

其中,setMonth(month, day) 方法用于设置月份,参数介绍如下:
month:必需。一个表示月份的数值,该值介于 0(一月) ~ 11(十二月) 之间。
day:可选。一个表示月的某一天的数值,该值介于 1 ~ 31 之间(以本地时间计)。在 EMCAScript 标准化之前,不支持该参数。

setDate(day) 方法用于设置一个月的某一天,参数介绍如下:
day:必需。表示一个月中的一天的一个数值(1 ~ 31)。

具体代码如下:

<template>
 <div>
  <el-date-picker v-model="month" type="month" @change="monthChange" placeholder="选择月" />
  <p>
   当月的每一天:
   <span v-for="item in everyDay" :key="item" style="margin-right:10px;">{{item}}</span>
  </p>
 </div>
</template>

<script>
export default {
 data() {
  return {
   month: "",
   everyDay: []
  };
 },
 mounted(){
  let date = new Date(), month = date.getMonth();
  this.getEveryDay(date, month);
 },
 methods: {
  monthChange(date) {
   this.getEveryDay(date, date.getMonth());
  },
  getEveryDay(date, month) {
   //设置月份
   date.setMonth(month + 1);
   //设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天(比如,二月份就是28或29,其他月份就是30或31),方便下边的循环
   date.setDate(0);
   let dayArry = [];
   //获取月份的某一天
   let day = date.getDate();

   for (let i = 1; i <= day; i++) {
    date.setDate(i);  //如果只获取当前选择月份的每一天,则不需要date.setDate(i)只需dayArry.push(i)即可,其中date.setDate(i)是设置当前月份的每一天
    dayArry.push(i + ' ' + this.getWeekday(date.getDay()));  //选中月份的每一天和当天是星期几
   }

   this.everyDay = dayArry;
  },
  getWeekday(day){
   return ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][day];
  },
 }
};
</script>

展示效果如下:

vue 根据选择的月份动态展示日期对应的星期几

注意,由于getMonth方法返回的值是从0开始的,所以如果要想获得正确的月份,需要在返回的值的基础上加1。而setDate这里有一点特殊,需要详细说明一下,setDate用于设置一个月的某一天,比如setDate(1)就是设置一个月的第一天,setDate(10)就是设置一个月的第十天。而由于众所周知的原因,月份可能会有28天或29天或30天或31天,如果让我们自己去写代码判断,又太过于繁琐,此时setDate(0)的牛逼之处就显示出来了(官方给出的setDate的参数介于1-31之间,将0给无情地抛弃了,零兄此时悲伤的高歌:无情的世界无情的你,你把老子当成手中的垃圾),setDate(0)设置的是一个月的最后一天,甭管这一天是28还是29,亦或是30或31(零兄此时高喊:以前你对我爱答不理,现在让你高攀不起!),之后再通过getDate方法来获取我们已经设置好的一个月份的最后一天,最后来上一个for循环,将每一天给塞进一个数组中,就可以打完收工!

当然,我们还可以不展示每一天对应的是星期几,只将每周的周六周日所对应的那两天给标红展示,代码只是做了一点小修改:

<template>
 <div style="margin:50px;">
  <el-date-picker v-model="month" type="month" @change="monthChange" placeholder="选择月" />
  <p style="margin-top:10px;">
   当月的每一天:
   <span v-for="item in everyDay" :key="item" style="margin-right:10px;" v-html="item"></span>
  </p>
 </div>
</template>

<script>
export default {
 data() {
  return {
   month: "",
   everyDay: []
  };
 },
 mounted(){
  let date = new Date(), month = date.getMonth();
  this.getEveryDay(date, month);
 },
 methods: {
  monthChange(date) {
   this.getEveryDay(date, date.getMonth());
  },
  getEveryDay(date, month) {
   //设置月份
   date.setMonth(month + 1);
   //设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天(比如,二月份就是28或29,其他月份就是30或31),方便下边的循环
   date.setDate(0);
   let dayArry = [];
   //获取月份的某一天
   let day = date.getDate();

   for (let i = 1; i <= day; i++) {
    date.setDate(i);
    if(date.getDay() == 0 || date.getDay() == 6){
     dayArry.push('<i class="red">' + i + '</i>');
    }else{
     dayArry.push(i);
    }
   }

   this.everyDay = dayArry;
  },
 }
};
</script>
<style>
.red{color:red;font-style:normal;}
</style>

展示效果如下:

vue 根据选择的月份动态展示日期对应的星期几

作者:小坏

出处:http://tnnyang.cnblogs.com

以上就是vue 根据选择的月份动态展示日期对应的星期几的详细内容,更多关于vue 选择月份动态展示日期的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 #Vue.js
如何封装Vue Element的table表格组件
Feb 06 #Vue.js
Vue实现圆环进度条的示例
Feb 06 #Vue.js
vue浏览器返回监听的具体步骤
Feb 03 #Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 #Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 #Vue.js
Vue常用API、高级API的相关总结
Feb 02 #Vue.js
You might like
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
php利用header函数下载各种文件
2016/08/24 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
javascript实现微信分享
2014/12/23 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
vue中倒计时组件的实例代码
2018/07/06 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python操作CouchDB的方法
2014/10/08 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
出纳的岗位职责
2013/11/09 职场文书
大学生创业计划书
2014/08/14 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
导游词之天津盘山
2019/11/01 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
聊聊golang中多个defer的执行顺序
2021/05/08 Golang