<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.DateBox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
background-color: yellowgreen;
color: white;
}
/*不是指定日期月份不允许点击*/
.el-calendar-table:not(.is-range) td.next,
.el-calendar-table:not(.is-range) td.prev {
pointer-events: none;
}
.el-calendar-table:not(.is-range) td.next .DateBox,
.el-calendar-table:not(.is-range) td.prev .DateBox {
color: #c0c4cc;
background-color: white;
}
.el-calendar-table thead th {
color: black;
background-color: white;
}
.IsSelected {
background-color: red;
}
th {
text-align: center;
font-size: 24px;
}
.el-calendar-table thead th::before {
content: '星期';
}
</style>
</head>
<body>
<div id="app" style="width: 100%;">
<span>请选择日期:</span>
<el-date-picker v-model="dateValue1" type="date" placeholder="选择日期">
</el-date-picker>
<el-calendar v-model="dateValue1">
<!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
<template slot="dateCell" slot-scope="{date, data}">
<div :id="data.day" class="DateBox" @click="AddDate(data)" @dblclick="DelDate(data)"
:class="BgIsSelected(data,dateData)?'IsSelected':''">
<span style="font-size: 30px;" @click="AddDate(data)" @dblclick="DelDate(data)">{{
data.day.split('-')[2]}}日</span>
<span style="position: absolute;top: 0;left: 0;font-size:x-small;vertical-align: sub;"
@click="AddDate(data)" @dblclick="DelDate(data)"> {{
data.day.split('-')[1]}}月</span>
</div>
</template>
</el-calendar>
<p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
鼠标单击日历单元格为选中日期,鼠标双击单元为取消选中。
</p>
</div>
<script>
var _this = new Vue({
el: "#app",
data: {
dateData: [
{
"ID": "20231101",
"Dates": "2023-11-01 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231102",
"Dates": "2023-11-02 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231103",
"Dates": "2023-11-03 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231106",
"Dates": "2023-11-06 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231107",
"Dates": "2023-11-07 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231108",
"Dates": "2023-11-08 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231109",
"Dates": "2023-11-09 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231110",
"Dates": "2023-11-10 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231113",
"Dates": "2023-11-13 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231114",
"Dates": "2023-11-14 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231115",
"Dates": "2023-11-15 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231116",
"Dates": "2023-11-16 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231117",
"Dates": "2023-11-17 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231120",
"Dates": "2023-11-20 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231121",
"Dates": "2023-11-21 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231122",
"Dates": "2023-11-22 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231123",
"Dates": "2023-11-23 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231124",
"Dates": "2023-11-24 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231127",
"Dates": "2023-11-27 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231128",
"Dates": "2023-11-28 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231129",
"Dates": "2023-11-29 00:00:00",
"Years": "2023",
"Months": "11"
},
{
"ID": "20231130",
"Dates": "2023-11-30 00:00:00",
"Years": "2023",
"Months": "11"
}
],
isDisabled: false,
dateValue1: '2023-11-01',
dateValue2: '2023-11-01',
},
methods: {
//判断日期是否在数组中,便于显示背景颜色
BgIsSelected: (data, dateData) => {
if (dateData.some(x => /\d{4}-\d{1,2}-\d{1,2}/.exec(x.Dates)[0] === data.day)) {
return true;
}
return false;
},
//添加日期
AddDate: (data) => {
//判断是否存在相同元素
//数据库读取的日期后边跟着00:00:00
if (_this.dateData.some(x => /\d{4}-\d{1,2}-\d{1,2}/.exec(x.Dates)[0] === data.day)) {
return;
}
var date = data.day.split('-')
//以下替换结果相同
//'2023-01-03'.split('-').join('')
//'2023-01-03'.replaceAll('-', '')
_this.dateData.push({ ID: data.day.replaceAll('-', ''), Dates: data.day, Years: date[0], Months: date[1], Days: date[2] });
},
//删除日期
DelDate: (data) => {
_this.dateData = _this.dateData.filter(item => /\d{4}-\d{1,2}-\d{1,2}/.exec(item.Dates)[0] !== data.day);
},
},
created() {
}
});
</script>
</body>
</html>
Element-UI使用el-calendar显示工作日
于 2023-11-21 14:26:12 首次发布