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+vant实现购物车全选和反选功能
Nov 17 Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 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 动态生成静态HTML页面示例代码
2014/01/15 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
保险公司晨会主持词
2014/03/22 职场文书
经理岗位职责
2015/02/02 职场文书
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server
如何利用python创作字符画
2022/06/25 Python