获取当前月日历

<template>
<div id="calendar">
<div class="top">{{date}}</div>
<ul>
<li><b>日</b></li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li><b>六</b></li>
</ul>
<ul v-for="item in arr" :key="item.id">
<li><span :class="item[0].day == date.substring(8) && item[0].month == '当月'? 'choose' :''" :style="!Object.is(item[0].month,'当月') ? 'color:#cecece;' : ''">{{item[0].day}}</span>&nbsp;</li>
<li><span :class="item[1].day == date.substring(8) && item[1].month == '当月'? 'choose' :''" :style="!Object.is(item[1].month,'当月') ? 'color:#cecece;' : ''">{{item[1].day}}</span>&nbsp;</li>
<li><span :class="item[2].day == date.substring(8) && item[2].month == '当月'? 'choose' :''" :style="!Object.is(item[2].month,'当月') ? 'color:#cecece;' : ''">{{item[2].day}}</span>&nbsp;</li>
<li><span :class="item[3].day == date.substring(8) && item[3].month == '当月'? 'choose' :''" :style="!Object.is(item[3].month,'当月') ? 'color:#cecece;' : ''">{{item[3].day}}</span>&nbsp;</li>
<li><span :class="item[4].day == date.substring(8) && item[4].month == '当月'? 'choose' :''" :style="!Object.is(item[4].month,'当月') ? 'color:#cecece;' : ''">{{item[4].day}}</span>&nbsp;</li>
<li><span :class="item[5].day == date.substring(8) && item[5].month == '当月'? 'choose' :''" :style="!Object.is(item[5].month,'当月') ? 'color:#cecece;' : ''">{{item[5].day}}</span>&nbsp;</li>
<li><span :class="item[6].day == date.substring(8) && item[6].month == '当月' ? 'choose' :''" :style="!Object.is(item[6].month,'当月') ? 'color:#cecece;' : ''">{{item[6].day}}</span>&nbsp;</li>
</ul>
</div>
</template>
<script>
import moment from 'moment'
export default {
data () {
return {
currentMonthDays:'',
currentWeekday:'',
lastMonthDays:'',
date:moment().format('YYYY-MM-DD'),
arr:[],
}
},
methods: {
getData(){
this.currentWeekday = moment(this.date).date(1).weekday(); // 获取当月1号为星期几
this.lastMonthDays = moment(this.date).subtract(1, 'month').daysInMonth(); // 获取上月天数
this.currentMonthDays = moment(this.date).daysInMonth(); // 获取当月天数
//一个月总天数是31,1号是周五或者周六 => 6个[]
//一个月总天数是30,1号是周六 => 6个[]
    var daysArr = []
if((this.currentMonthDays == '31' && this.currentWeekday == '5' || this.currentWeekday == '6' ) || (this.currentMonthDays == '30' && this.currentWeekday == '6')){
daysArr = [[], [], [], [], [], []];
}else{
daysArr = [[], [], [], [], []];
}
//当day小于等于上月天数取day,
//当day小于等于上月天数 + 当月天数则取 day-上月天数
//当day大于上月天数 + 当月天数则取 day - (上月天数 + 当月天数)
//展示上个月这个月下个月的日历
const getDay = day => (day <= this.lastMonthDays ? day : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : day - (this.lastMonthDays + this.currentMonthDays)); // 日期处理
//只展示这个月的日历
// const getDay = day => (day <= this.lastMonthDays ? '' : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : ''); // 日期处理
//当mon小于等于上月天数该日期属于上个月,
//当day小于等于上月天数 + 当月天数则该日期属于这个月
//当day大于上月天数 + 当月天数则该日期属于下个月
const getMonth = mon => (mon <= this.lastMonthDays ? '上月' : mon <= (this.lastMonthDays + this.currentMonthDays) ? '当月' : '下月') for (let i = 0; i < 7; i += 1) {
let virtualDay = (this.lastMonthDays - this.currentWeekday) + i + 1;
for (let j = 0; j < daysArr.length; j += 1) {
daysArr[j][i] = {'day':getDay(virtualDay + (j * 7)),'month':getMonth(virtualDay + (j * 7))};
}
}
console.table(daysArr);
this.arr = daysArr }
},
mounted () {
this.getData()
} }
</script>
<style scoped >
*{margin:0;padding:0; list-style:none }
.choose{
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
background: #2196f3;
color: #fff !important;
border-radius: 50%;
}
#calendar {
width: 400px;
font-size: 12px;
margin: 50px auto;
border-bottom: 1px solid #2196f3;
} #calendar .top {
height: 40px;
line-height: 40px;
background: #2196f3;
border: 1px solid #2196f3;
color: #fff;
padding: 0 10px;
clear: both;
}
#calendar ul {
margin: 0;
padding: 0;
height:50px;
color: #888;
font-size: 14px;
border-left: 1px solid #2196f3;
border-right: 1px solid #2196f3;
display: flex;
align-items: center;
justify-content: space-between;
} #calendar ul li {
width: 48px;
}
#calendar ul li span {
color: black;
font-weight: bold;
}
#calendar ul li b {
font-weight: normal;
color: #0781e2;
}
</style>

这个是只取当前月份:使用这个  =>  const getDay = day => (day <= this.lastMonthDays ? '' : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : ''); // 日期处理



在当月日历展示下个月的日期使用如下方法
const getDay = day => (day <= this.lastMonthDays ? day : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : day - (this.lastMonthDays + this.currentMonthDays)); // 日期处理


												

moment 获取当前月日历的更多相关文章

  1. android datepicker monthOfYear getMonth(): 获取当前月(注意:返回数值为0..11,需要自己+1来显示).....

    关键点: 1. getMonth():     获取当前月(注意:返回数值为0..11,需要自己+1来显示) 2. 初始年(译者注:注意使用new Date()初始化年时,需要+1900,如下:dat ...

  2. java获取当前月第一天和最后一天

    获取当前月第一天: /** * 获取当前月第一天 * @param month * @return */ public static String getFirstDayOfMonth(int mon ...

  3. Date小技巧:set相关操作及应用_获取当前月(季度/年)的最后一天

    set操作还是有不少的,具体见 http://www.w3school.com.cn/jsref/jsref_obj_date.asp, 今天我就只说 setFullYear, setMonth, s ...

  4. C# 获取当前月第一天和最后一天 计算两个日期差多少天

    获取当前月的第一天和最后一天 DateTime now = DateTime.Now; DateTime firstDay = ); DateTime lastDay = firstDay.AddMo ...

  5. C# 获取当前月第一天和最后一天

    废话不多说,直接上代码 //先获取当前时间 DateTime now = DateTime.Now; //获取当前月的第一天 DateTime d1 = new DateTime(now.Year, ...

  6. java获取当前月第一天和最后一天,上个月第一天和最后一天

    package com.test.packager; import java.text.ParseException; import java.text.SimpleDateFormat; impor ...

  7. laravel 获取当前月,当前星期,当天起始时间方法

    获取当前月起始时间: 1. $time=time(); $start=date('Y-m-01',$time);//获取指定月份的第一天 $end=date('Y-m-t',$time); //获取指 ...

  8. php获取当前月月初至月末的时间戳,上个月月初至月末的时间戳

    当前月 <?php $thismonth = date('m'); $thisyear = date('Y'); $startDay = $thisyear . '-' . $thismonth ...

  9. 【HANA系列】SAP HANA SQL获取当前月的第一天

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL获取当前 ...

随机推荐

  1. hive元数据格式化 在hive中执行sql语句:SemanticException org.apache.hadoop.hive.ql.metadata.HiveException:

    https://blog.csdn.net/xiaoqiu_cr/article/details/80913437

  2. Vue 学习笔记之 —— 表单输入绑定

    Vue 中文文档 https://cn.vuejs.org/ 不多说,直接上干货. v-model 指定,用来在input textarea 等表单元素上创建双向数据绑定,负责监听用户的输入事件,以及 ...

  3. Java 自动检测文本文件编码

    private String guessCharset(InputStream is) throws IOException { return new TikaEncodingDetector().g ...

  4. C# WinForm 访问webService天气预报

    1.直接添加服务引用 右键引用 -->添加服务引用 这样的好处是可以直接当成类用 简单 麻烦的地方就是地址是死的 代码如下: private void button1_Click(object ...

  5. React 生命周期 16.0以下

    虽然有人画过了  但是自己画一下也能加深记忆吧

  6. python--面向对象:多态与封装

    一.多态 :python 天生支持多态多态指的是一类事物有多种形态 eg:文件有多种形态:文本文件,可执行文件鸭子类型:python中崇尚鸭子类型,不崇尚根据继承所得来的相似 优点 : 松耦合 每个相 ...

  7. 笔记:TCP/IP基础知识

    TCP/IP是指利用IP进行通信时必须用到的协议群的统称. 互联网层(网络层) IP IP是跨越网络传送数据包,使整个网络都能收到数据的协议.IP地址在发送数据的时候作为主机的标识. ICMP 用来诊 ...

  8. 笔记39 Spring Web Flow——订单流程(收集顾客信息)

    如果你曾经订购过披萨,你可能会知道流程.他们首先会询问你的电 话号码.电话号码除了能够让送货司机在找不到你家的时候打电话给 你,还可以作为你在这个披萨店的标识.如果你是回头客,他们可以 使用这个电话号 ...

  9. [翻译]windows下 连接到 bitnami的phpmyadmin

    bitnami 因为安全考虑,只能 localhost 访问 phpmyadmin 为了能通过SSH 隧道访问 phpMyAdmin,你需要一个ssh 客户端.参考文章介绍使用中选择使用 PuTTY, ...

  10. 【SGU194】Reactor Cooling

    题目大意 给定一个无源无汇的网络,边的容量有上下界限制,试构造一个合理的流量. 题目分析 求无源汇上下界的可行流模板题. ①增加一个附加源和汇\(S,T\). ②把每个节点的\(\sum b_{u,i ...