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中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
Vue router配置与使用分析讲解
Dec 24 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实现用户注册登录功能
2016/10/14 PHP
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
理解javascript闭包
2015/12/15 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
Python求算数平方根和约数的方法汇总
2016/03/09 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
python 利用zmail库发送邮件
2020/09/11 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
会计岗位职责模板
2014/03/12 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
环保倡议书400字
2014/05/15 职场文书
节水标语大全
2014/06/11 职场文书
培训感想范文
2015/08/07 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS