1,当月第一天和最后一天
let date = new Date(), y = date.getFullYear(), m = date.getMonth();
let firstDay = new Date(y, m, 1);
let lastDay = new Date(y, m + 1, 0);
2,指定月份的第一天和最后一天
比如2012年1月第一天和最后一天，运算时月份要减1
var y = 2012, m = 1
var firstDay = new Date(y, m - 1, 1);
var lastDay = new Date(y, m, 0);
console.log(firstDay);
console.log(lastDay);
<Row :gutter="16" class="mt-20">
<Col :span="14">
<div class="calendar-box">
<div class="p-20">
<DatePicker type="date" placeholder="请选择日期" @on-change="ChangeTime" v-model="valueData"></DatePicker>
</div>
<div class="ptm-20">
<table class="week-wrapper">
<tr>
<td class="c-red">星期日</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td class="c-red">星期六</td>
</tr>
</table>
</div>
<div class="p-20">
<ul class="calendar-wrapper clearfix">
<li v-for="(item, index) in CalendarDays" :key="index" class="calendar-li">
<div class="calendar-div" :class="{'checked-dayBg': currentData === item.day && item.type==='current'}">
<Poptip trigger="hover" placement="bottom-start" v-if="item.isFuture && item.isTodayFuture" class="after-time-pop">
<div class="calendar-day" v-if="item.type === 'current'">{{item.day}}</div>
<div class="calendar-day" v-else style="color: #ccc">{{item.day}}</div>
<div slot="content" class="inner-content-slot" v-for="el in getTaskState && getTaskState.futureList">
<router-link :to="{path: '/' + el.path, 'query': {time: `${item.year}${item.month}${item.daaa}`, type: el.value}}">
<p style="color: #2d8cf0;">{{el.label}}
<span class="pl-5">{{el.number}}</span>
</p>
</router-link>
</div>
</Poptip>
<div v-if="!item.isFuture && item.isTodayFuture" class="current-dayBg">
<div class="calendar-day">{{item.day}}</div>
<div class="today-todo">
<div v-for="el in getTaskState && getTaskState.futureList">
<router-link :to="{path: '/' + el.path, 'query': {time: `${item.year}${item.month}${item.daaa}`, type: el.value}}">
<div style="color: #fff">{{el.label}}
<span class="pl-5">{{el.number}}</span>
</div>
</router-link>
</div>
</div>
</div>
<Poptip trigger="hover" placement="bottom-start" v-else-if="!item.isFuture && !item.isTodayFuture" class="before-time-pop">
<div class="calendar-day" v-if="item.type === 'current'">{{item.day}}</div>
<div class="calendar-day" v-else style="color:#ccc">{{item.day}}</div>
<div slot="content" class="inner-content-slot">
<div v-for="el in getTaskState && getTaskState.beforeList">
<router-link :to="{path: '/' + el.path, 'query': {time: `${item.year}-${item.month}-${item.daaa}`, type: el.value}}">
<p>{{el.label}}
<span class="pl-5">{{el.number}}</span>
</p>
</router-link>
</div>
</div>
</Poptip>
</div>
</li>
</ul>
</div>
</div>
</Col>
<Col :span="10">
<div class="tabs-wrap">
<Tabs :value="activeName" :animated="false" @on-click=ClickTabs class="pt-10">
<TabPane label="动态" name="first">
<!-- <div style="height: 635px;background: #ffc"> -->
<div v-for="(item, index) in dynamicWorkList" :key="index" class="tabs-list dynamic-tabs">
<dynamic-list :dynamicWorkList="item"></dynamic-list>
</div>
<!-- </div> -->
<div class="p-17 t-c">
<Page size="small" :total="dynamicWorkCount" :current="cardCurrent" show-total @on-change="pageChangeCard"></Page>
</div>
</TabPane>
<TabPane label="待办任务" name="second">
<!-- <div style="height: 630px;background: #ffc"> -->
<div v-for="(item, index) in taskToDoData" :key="index" class="tabs-list todo-tabs">
<task-todo :TabsTaskToDo="item"></task-todo>
</div>
<!-- </div> -->
<div class="p-18 t-c">
<Page size="small" :total="taskToDoCount" :current="todoCurrent" show-total @on-change="pageChangeTodo"></Page>
</div>
</TabPane>
</Tabs>
<div class="tabs-seach" v-show="activeName=='second'">
<DatePicker type="daterange" :value="todoTaskTime" split-panels class="width-200" @on-change="changeTodoTime"></DatePicker>
<!-- <DatePicker type="date" placeholder="请选择" class="width-200"></DatePicker> -->
</div>
</div>
</Col>
</Row>
2,ts
valueData: any = '' // 日历文本框的值
CalendarDays: any = [] // 日历时间
currentYear: any = '' // 当前年(下拉框里面的当前时间,不是现在的时间)
currentMouth: any = ''
currentData: any = ''
ClickTabs (name) {
this.activeName = name
}
created () {
let currentTime = new Date()
this.valueData = currentTime // 文本框里的时间
this.getInputValue(currentTime)
}
// 处理获取的时间,转换成20180901这种格式
getDateStr (date) {
var timeY = date.getFullYear()
var timeM = date.getMonth()
var timeD = date.getDate()
timeM = (timeM > 9) ? timeM : ('0' + timeM)
timeD = (timeD > 9) ? timeD : ('0' + timeD)
// console.log('timeY + timeM + timeD', `${timeY}${timeM}${timeD}`)
return `${timeY}${timeM}${timeD}`
}
// 获取值,当前年月或者文本框里的值
getInputValue (timestr) {
let dat = timestr ? new Date(timestr) : new Date()
this.currentYear = dat.getFullYear()
this.currentMouth = dat.getMonth()
this.currentData = dat.getDate()
}
// 生成日历时间
getCalendarData () {
let dayArr = []
let _firstData = new Date(this.currentYear, this.currentMouth, 1) // 当前月第一天
// console.log(_firstData)
let startWeek = _firstData.getDay() // 当前月开始的星期
for (var i = 0; i < 42; i++) {
let _AllDay = new Date(this.currentYear, this.currentMouth, i + 1 - startWeek) // 所有循环出来的时间,一共42个
// console.log(_AllDay.getTime() < Date.now() - 8.64e7),时间戳
let isFuture = _AllDay.getTime() > Date.now() // 未来为true,今天昨天为false
let isTodayFuture = _AllDay.getTime() > Date.now() - 8.64e7 // 未来和今天为true
let _AllDayStr = this.getDateStr(_AllDay)
let month = _AllDay.getMonth() + 1 > 9 ? _AllDay.getMonth() + 1 : '0' + (_AllDay.getMonth() + 1)
let daaa = _AllDay.getDate() > 9 ? _AllDay.getDate() : ('0' + _AllDay.getDate())
// getDateStr(_firstData),处理当前月,跟获取的所有日期进行对比
if (_AllDayStr.substr(0, 6) === this.getDateStr(_firstData).substr(0, 6)) {
dayArr.push({
type: 'current',
isFuture: isFuture,
isTodayFuture: isTodayFuture,
year: _AllDay.getFullYear(),
month: month,
daaa: daaa,
day: _AllDay.getDate()
})
} else if (_AllDayStr.substr(0, 6) < this.getDateStr(_firstData).substr(0, 6)) {
dayArr.push({
type: 'before',
isFuture: isFuture,
isTodayFuture: isTodayFuture,
year: _AllDay.getFullYear(),
month: month,
daaa: daaa,
day: _AllDay.getDate()
})
} else {
if (_AllDay.getDay() === 0) { // 如果日历只是补全,下个月的最多显示6个,不再重新起一行显示
break
}
dayArr.push({
type: 'after',
isFuture: isFuture,
isTodayFuture: isTodayFuture,
year: _AllDay.getFullYear(),
month: month,
daaa: daaa,
day: _AllDay.getDate()
})
}
}
this.CalendarDays = dayArr
// console.log(dayArr)
}
// 改变下拉的时间的值
ChangeTime (timestr) {
this.getInputValue(timestr)
this.getCalendarData()
}
