VUE 3 TS 自定义 Calendar 日历可以点击选择和滑动选择日期夸月选择

民工_

2024-04-27 帮助1人

最近项目中需要一个可以自由选择日期的空间，在网上找了很久都没有适合的可用，索性自己写了一个，看代码。可以滑动选择和点击选择竖向点击星期几选择

学新通

<template>
<el-button type="primary" @click="ClickReset" >重置</el-button>
<el-button type="primary" @click="isShow=!isShow" >显示价格</el-button>
<div class="flex-wrap text-primary" @mouseup="Mouseup">
<div v-for="month in monthlist" :key="month" class="calendar-month mt-24 ml-16">
<div class="pb-8 text-14 text-center">{{ month.date }}</div>
<ul class="flex-wrap text-sub">
<li class="text-tip" @click="ClickWeek(month,0)">日</li>
<li class="text-tip" @click="ClickWeek(month,1)">一</li>
<li class="text-tip" @click="ClickWeek(month,2)">二</li>
<li class="text-tip" @click="ClickWeek(month,3)">三</li>
<li class="text-tip" @click="ClickWeek(month,4)">四</li>
<li class="text-tip" @click="ClickWeek(month,5)">五</li>
<li class="text-tip" @click="ClickWeek(month,6)">六</li>
<li v-for="item in month.week" :key="item" data-id="">
<div></div>
</li>
<li v-for="item in month.days" :key="item" :data-id="item.date"
@click="ClickItem(item)"
@mousedown="Mousedown(item)"
@mouSEO（(Search Engine Optimization)）ver="MouSEO（(Search Engine Optimization)）ver(item)"
@mouseup="Mouseup">
<div class="relative" :class="{'isHover':item.hover,'isSelected':item.selected}" >
<p class="">{{ item.day }}</p>
<span v-show="isShow" class="absolute color-red">{{item.price}}</span>
</div>
</li>
</ul>
</div>
</div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from "vue";
import moment from "moment";
interface Month {
date: string,
days:Day[],
week:number,
}
interface Day {
date: string,
week:number,
day: string,
hover: boolean,
selected: boolean,
price:string,
}
const isShow= ref(false);
const monthlist=ref<Month[]>([]);
onMounted(()=>{
console.log('onMounted')
for (let i = 0; i < 6; i ) {
let firstdate = moment().add(i,'month').startOf('month');
let enddate = moment().add(i,'month').endOf('month');
let date = firstdate.toDate();
let days:Day[] = [];
for (let j = 0; j < enddate.diff(date,'days') 1; j ) {
let date1 = moment(date).add(j,'day').toDate();
days.push({
date: moment(date1).format('YYYY-MM-DD'),
week:moment(date1).day(),
day: moment(date1).date() '',
hover:false,
selected: false,
price:'￥2000'
})
}
monthlist.value.push({
date: firstdate.format('YYYY 年 MM 月'),
days:days,
week:firstdate.day(),
}
);
}
console.log(monthlist);
})
const ClickItem = (day:Day) => {
day.selected=!day.selected;
}
let date_begin = ''
const Mousedown = (day:Day) => {
date_begin=day.date;
}
const MouSEO（(Search Engine Optimization)）ver = (day:Day) => {
if(date_begin!='')
{
for (let i = 0; i < monthlist.value.length; i ) {
for (let j = 0; j < monthlist.value[i].days.length; j ) {
let day1 = monthlist.value[i].days[j];
if((day1.date >= day.date && day1.date <= date_begin)||(day1.date <= day.date && day1.date >= date_begin)){
day1.hover=true;
}else {
day1.hover=false;
}
}
}
}
}
const Mouseup = () => {
date_begin = ''
for (let i = 0; i < monthlist.value.length; i ) {
for (let j = 0; j < monthlist.value[i].days.length; j ) {
let day1 = monthlist.value[i].days[j];
if(day1.selected && day1.hover){
day1.selected=false;
day1.hover=false;
}else if(!day1.selected &&day1.hover){
day1.selected=true;
day1.hover=false;
}
}
}
}
const ClickWeek = (month:Month,week:number) => {
for (let j = 0; j < month.days.length; j ) {
if(month.days[j].week===week){
month.days[j].selected=!month.days[j].selected;
}
}
}
const ClickReset = () => {
for (let i = 0; i < monthlist.value.length; i ) {
for (let j = 0; j < monthlist.value[i].days.length; j ) {
let day1 = monthlist.value[i].days[j];
day1.selected=false;
day1.hover=false;
}
}
}
</script>
<style scoped lang="scss">
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
ol, ul {
list-style: none;
}
body, div, li, p, ul {
margin: 0;
padding: 0;
}
div {
display: block;
}
.flex-wrap{
flex-wrap: wrap;
display: flex;
}
.mt-24 {
margin-top: 24px;
}
.ml-16 {
margin-left: 16px;
}
.text-primary {
color: #333;
}
.text-primary, .text-sub, .text-tip {
line-height: 1.5;
}
.text-center {
text-align: center;
}
.text-14 {
font-size: 14px;
line-height: 1.5;
}
.pb-8 {
padding-bottom: 8px;
}
.text-sub {
color: #666;
}
.text-tip {
background-color: #f5f7fa;
color: #999;
}
.color-red {
color: #f5222d;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.calendar-month{
border: 1px solid #d0d0d0;
}
.calendar-month ul {
width: 252px;
padding: 1px;
}
.calendar-month li {
text-align: center;
width: 36px;
height: 36px;
line-height: 36px;
font-size: 14px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
//border: 1px dashed #8c939d;
}
.calendar-month li span {
font-size: 8px;
bottom: -12px;
left: -2px;
text-align: center;
transform: scale(.6);
}
.calendar-month .isSelected {
background: #b3c8ff;
color: #162d53;
}
.calendar-month .isHover {
background: #6f90e0 !important;
color: #fff!important;
}
.calendar-month .isOver {
background-color: #f0f0f0;
color: #999;
}
//.calendar-month li:nth-of-type(7n), .calendar-month li:nth-of-type(7n - 1) {
// background: #f5f7fa;
//}
//.calendar-month li:hover{
// background-color: #f0f0f0;
// color: #999;
//}
</style>

这篇好文章是转载于：学新通技术网

VUE 3 TS 自定义 Calendar 日历可以点击选择和滑动选择日期夸月选择

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开

VUE 3 TS 自定义 Calendar 日历 可以点击选择 和 滑动选择日期 夸月选择

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开

VUE 3 TS 自定义 Calendar 日历可以点击选择和滑动选择日期夸月选择