el-calenda工作日显示
原生自定义
<template>
<span>请选择日期:</span>
<el-date-picker v-model="dateValue1" type="date" placeholder="选择日期">
</el-date-picker>
<el-calendar v-model="dateValue1">
<template #date-cell="{ 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: 楷体;">
1、鼠标单击日历单元格为选中日期,鼠标双击单元为取消选中。
</p>
<p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
2、选中的日期只能是一个月的,不能跨月选择,最终保留的数据月份以日期选择器的日期年月为基准;
编辑的数据不会以日期选择器的为主,保存的数据以选中记录的年月日为主。
</p>
<p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
3、选择完成记得点击保存,否则操作不会自动保存到数据库。
</p>
</template>
<script setup>
import { ref, watch } from 'vue';
import { dayjs } from 'element-plus'
const dateData = ref([
{
"ID": "20231101",
"Dates": "2023-11-01 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231102",
"Dates": "2023-11-02 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231103",
"Dates": "2023-11-03 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231106",
"Dates": "2023-11-06 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231107",
"Dates": "2023-11-07 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231108",
"Dates": "2023-11-08 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231109",
"Dates": "2023-11-09 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231110",
"Dates": "2023-11-10 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231113",
"Dates": "2023-11-13 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231114",
"Dates": "2023-11-14 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231115",
"Dates": "2023-11-15 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231116",
"Dates": "2023-11-16 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231117",
"Dates": "2023-11-17 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231120",
"Dates": "2023-11-20 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231121",
"Dates": "2023-11-21 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231122",
"Dates": "2023-11-22 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231123",
"Dates": "2023-11-23 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231124",
"Dates": "2023-11-24 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231127",
"Dates": "2023-11-27 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231128",
"Dates": "2023-11-28 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231129",
"Dates": "2023-11-29 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
},
{
"ID": "20231130",
"Dates": "2023-11-30 00:00:00",
"Years": "2023",
"Months": "11",
"Confirms": 1,
}
]);
const dateValue1 = ref(new Date('2023-11-01'));
const dateValue2 = ref(new Date('2023-11-01'));
const 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;
}
const AddDate = (data) => {
if (dateData.value.some(x => /\d{4}-\d{1,2}-\d{1,2}/.exec(x.Dates)[0] === data.day)) {
return;
}
var date = data.day.split('-')
dateData.value.push({ ID: data.day.replaceAll('-', ''), Dates: data.day, Years: date[0], Months: date[1], Days: date[2] });
}
const DelDate = (data) => {
dateData.value = dateData.value.filter(item => /\d{4}-\d{1,2}-\d{1,2}/.exec(item.Dates)[0] !== data.day);
}
const handleDateData = () => {
var data1 = dateValue2.split('-')
if (data1.length > 0) {
var data2 = dateData.value.filter(item => item.Years === data1[0]);
var data3 = data2.filter(item => item.Months === data1[1]);
}
if (data3.length > 0) {
var sql = "INSERT INTO T_GXR(ID, Dates, Years, Months, Confirms) VALUES";
data3.forEach(item => {
sql += "(''" + item.ID + "'',''" + item.Dates + "'',''" + item.Years + "'',''" + item.Months + "''),";
})
var newSql = sql.slice(0, -1);
newSql += ";";
return [newSql, data3[0].Years, data3[0].Months];
}
return '';
}
watch(dateValue1, (newVal, oldVal) => {
console.log(newVal.toLocaleDateString(), oldVal.toLocaleDateString())
})
</script>
<style scoped>
.DateBox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
background-color: yellowgreen;
color: white;
}
:deep(.next) {
pointer-events: none;
}
:deep(.prev) {
pointer-events: none;
}
.next .DateBox,
.prev .DateBox {
color: #c0c4cc;
background-color: white;
}
.el-calendar-table thead th {
color: black;
background-color: white;
}
.IsSelected {
background-color: red;
}
</style>
使用chinese-workday
<template>
<span>请选择日期:</span>
<el-date-picker v-model="dateValue1" type="date" placeholder="选择日期">
</el-date-picker>
<el-calendar v-model="dateValue1">
<template #date-cell="{ data }">
<div class="DateBox" :class="isWorkday(data.day) ? 'IsSelected' : ''">
<span style="font-size: 30px;">
{{ dayjs(data.day).format('DD') }}日</span>
<span style="position: absolute;top: 0;left: 0;font-size:x-small;vertical-align: sub;">
{{ dayjs(data.day).format('MM') }}月</span>
<span style="position: absolute;bottom: 0;right: 0;font-size:x-small;vertical-align: sub;">
{{ getFestival(data.day) }}</span>
</div>
</template>
</el-calendar>
<p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
1、鼠标单击日历单元格为选中日期,鼠标双击单元为取消选中。
</p>
<p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
2、选中的日期只能是一个月的,不能跨月选择,最终保留的数据月份以日期选择器的日期年月为基准;
编辑的数据不会以日期选择器的为主,保存的数据以选中记录的年月日为主。
</p>
<p style="text-align: left;color: red;font-size: 30px;font-weight: bold;font-family: 楷体;">
3、选择完成记得点击保存,否则操作不会自动保存到数据库。
</p>
</template>
<script setup>
import { ref, watch } from 'vue';
import { dayjs } from 'element-plus'
import { isWorkday, getFestival } from 'chinese-workday'
const dateValue1 = ref(new Date('2023-11-01'))
watch(dateValue1, (newVal, oldVal) => {
console.log(newVal.toLocaleDateString(), oldVal.toLocaleDateString())
})
</script>
<style scoped>
.DateBox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
background-color: yellowgreen;
color: white;
}
:deep(.next) {
pointer-events: none;
}
:deep(.prev) {
pointer-events: none;
}
.next .DateBox,
.prev .DateBox {
color: #c0c4cc;
background-color: white;
}
.el-calendar-table thead th {
color: black;
background-color: white;
}
.IsSelected {
background-color: red;
}
</style>