适用vue，uniapp月份日期周几的选择
下面引入的 common.js
const GetNowTime = (time, type) => {
var date = time,
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
month >= 1 && month <= 9 ? (month = "0" + month) : "";
day >= 0 && day <= 9 ? (day = "0" + day) : "";
if (type == 1) {
var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
} else {
var timer = year + '-' + month + '-' + day;
}
return timer;
}
module.exports = {
GetNowTime
}
<template>
<view>
<view class="rqxz">
<view><button type="primary" size="mini" @click="lastMonth">上一月</button></view>
<view v-if="month >= 10">{
{
year }}-{
{
month }}</view>
<view v-else>{
{
year }}-0{
{
month }}</view>
<view><button type="primary" size="mini" @click="nextMonth">下一月</button></view>
</view>
<view class="weekBox">
<block v-for="item in weekList" :key="item">
<view>{
{
item.slice(1) }}</view>
</block>
</view>
<view class="BigBox">
<block v-for="(item, index) in everyDay" :key="item.day">
<view class="MWBox">
<view @click="selectDay(item, index)" :class="day == item.day ? 'daySelect' : ''">{
{
item.day }}</view>
<!-- <view>{
{
item.week }}</view> -->
</view>
</block>
</view>
<button type="default" @click="submit">提交</button>
</view>
</template>
<script>
import common from '../../common/common.js';//封装的格式化日期方法
export default {
data() {
return {
weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
year: 2020,
month: 0,
day: 0,
week: '',
everyDay: []
};
},
onLoad() {
this.year = Number(common.GetNowTime(new Date(), 2).slice(0, 4));
this.month = Number(common.GetNowTime(new Date(), 2).slice(5, 7));
this.day = Number(common.GetNowTime(new Date(), 2).slice(8, 10));
this.getEveryDay(this.year + '-' + this.month);
},
methods: {
//上一月
lastMonth() {
this.month -= 1;
if (this.month == 0) {
this.year -= 1;
this.month = 12;
}
this.getEveryDay(this.year + '-' + this.month);
this.zeroData();
},
//下一月
nextMonth() {
this.month += 1;
if (this.month > 12) {
this.year += 1;
this.month = 1;
}
this.getEveryDay(this.year + '-' + this.month);
this.zeroData();
},
//选择日期
selectDay(item, index) {
if (item.day != '') {
this.day = item.day;
this.week = item.week;
}
},
//提交按钮事件
submit() {
console.log(common.GetNowTime(new Date(this.year + '-' + this.month + '-' + this.day), 2));
},
//遍历月份日期
getEveryDay(data) {
let date = new Date(data);
let month = date.getMonth();
//设置月份
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({
day: i, week: this.getWeekday(date.getDay()) }); //选中月份的每一天和当天是星期几
}
this.everyDay = dayArry;
this.resetDay();
},
getWeekday(day) {
return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][day];
},
//重置日期与顶部周期相对应
resetDay() {
let arr = this.weekList;
let w = this.everyDay[0].week;
arr.forEach((v, index) => {
if (v == w) {
let id = index;
if (id != 0) {
for (let i = 0; i < id; i++) {
this.everyDay.unshift({
day: '', week: '' });
}
}
}
});
},
//判断选择的日期是否在当前月份中存在，不存在默认当前月的第一天
zeroData() {
let that = this;
that.selectIndex = -1;
let arr = that.everyDay;
let day1 = that.day;
var ret = arr.findIndex(v => {
return v.day == day1;
});
if (ret == -1) {
that.day = 1;
}
}
}
};
</script>
<style lang="less" scoped>
.rqxz {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
margin: 20upx 0;
}
.weekBox {
width: 100%;
display: flex;
align-items: center;
view {
text-align: center;
width: 14%;
}
}
.BigBox {
width: 100%;
display: flex;
flex-wrap: wrap;
background-color: #83cbac;
padding-bottom: 40upx;
.MWBox {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
color: #ffffff;
width: 14%;
margin-top: 40upx;
view {
height: 50upx;
}
}
}
.daySelect {
// width: 50upx;
height: 50upx;
background-color: #2b7c38;
border-radius: 25upx;
line-height: 50upx;
}
</style>
效果图：
本文由自己开发，不足之处,欢迎大佬们指出（不要在意样式）