现在的各种各样的ui框架里面都有 但是呢 有些不是我们想要的 此时就要自己手动去写一个了 这里是基于周来的 先看下原型效果 里面可以展示年月日或者月日 代码里面有
<template>
<div class="weekList">
<div v-for="item in arrWeek" :key="item.date" class="dateInfo decItem">
<span class="week">{
{ item.week }}</span>
<span class="date">{
{ item.date }}</span>
</div>
</div>
<div>
<el-button type="primary" @click='changeWeek(1)'>上一周</el-button>
<el-button type="primary" @click="changeWeek(2)">下一周</el-button>
</div>
</template>
<script>
import { reactive, toRefs,onMounted } from 'vue';
export default {
setup () {
const data = reactive({
arrWeek: [],
timestamp:'',
yearData:[]
})
const getCurrent = () => {
// data.timestamp = new Date().getTime()
const week = new Date(data.timestamp).getDay() // 今天是星期几（0~6）
const sunday = data.timestamp - 24 * 60 * 60 * 1000 * week // 第一天的时间戳
for (let i = 0; i < 7; i++) {
var day = sunday + 24 * 60 * 60 * 1000 * (i + 1)
var dateStr = parseTime(day, '{m}-{d},{a}')
data.arrWeek.push({ date: dateStr.split(',')[0], week: dateStr.split(',')[1] })
var dateyear = getYearData(day, '{y}-{m}-{d},{a}')
data.yearData.push(dateyear.split(',')[0])
}
// handelYsList()
}
const parseTime = (time, cFormat) => {
const format = cFormat || '{m}-{d}'
let date = null
if (typeof time === 'object') {
date = time
} else {
if (typeof time === 'string') {
if (/^[0-9]+$/.test(time)) {
time = parseInt(time)
} else {
time = time.replace(new RegExp(/-/gm), '/')
}
}
if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
m: date.getMonth() + 1,
d: date.getDate(),
a: date.getDay(),
b: date.getHours() < 12 ? 1 : 2
}
const timeStr = format.replace(/{([ymdhisab])+}/g, (result, key) => {
const value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][value]
}
if (key === 'b') {
return value.toString()
}
return value.toString().padStart(2, '0')
})
return timeStr
}
//获取当前时间
const getYearData = (time, cFormat) => {
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date = null
if (typeof time === 'object') {
date = time
} else {
if (typeof time === 'string') {
if (/^[0-9]+$/.test(time)) {
time = parseInt(time)
} else {
time = time.replace(new RegExp(/-/gm), '/')
}
}
if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay(),
b: date.getHours() < 12 ? 1 : 2
}
const timeStr = format.replace(/{([ymdhisab])+}/g, (result, key) => {
const value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][value]
}
if (key === 'b') {
return value.toString()
}
return value.toString().padStart(2, '0')
})
return timeStr
}
const changeWeek=(num)=>{
data.arrWeek = []
data.yearData = []
if (num === 1) {
data.timestamp -= 24 * 60 * 60 * 1000 * 7
getCurrent()
} else {
data.timestamp += 24 * 60 * 60 * 1000 * 7
getCurrent()
}
}
onMounted(()=>{
data.timestamp = new Date().getTime()
getCurrent()
})
return {
...toRefs(data),
changeWeek
}
}
};
</script>
<style lang='scss' scoped>
.weekList{
width:1200px;
margin:0 auto;
display: flex;
justify-content: space-between;
.decItem{
width: 152px;
height: 104px;
background: rgba(243, 246, 250, 0.3);
border-radius: 4px;
border: 1px solid #D3D5E2;
margin-bottom: 20px;
font-size: 18px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #222B31;
margin-right:17px;
position: relative;
.week{
position: absolute;
right:0;
top:0;
background: rgba(20, 133, 255, 0.1);
border-radius: 0px 0px 0px 8px;
padding:5px 10px;
font-size: 12px;
color:#1485FF;
}
.date{
line-height:106px;
color:#222B31;
font-size: 20px;
}
}
}
</style>
代码是基于 vue3.0写的 不懂得可以参考vue3.0官网看看 或者自己拆分出来2.0的写法