菜单 搜索
首页 前端知识 vue html5 css制作日历代码，工作日配置

vue html5 css制作日历代码，工作日配置

2024-06-19 08:06:05 前端知识 前端哥 738 585 我要收藏

目录

1.日历页面

2.工作日查询、自然日查询 js

3.修改工作日配置

4.数据库，表结构

5.初始化数据

因系统需要，需要制作一个功能--工作日配置。

需要的业务有：

1.初始化与国家放假情况一致，之后支持手动进行工作日配置；

2.展示12个月的放假/工作日情况；

3.一些特殊的日期，如调休、春节等需要进行展示。

页面展示：

修改页面：

1.日历页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/header_css::header('工作日维护')"></head>
<style type="text/css">
.calendar-box * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.calendar-box {
    border: 1px solid #d2d2d2;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    background-color: #fff;
    color: #666;
    position: relative;
    z-index: 0;
    display: inline-block;
    width: 272px;
    border-radius: 2px;
    font-size: 14px;
}
.calendar-content {
    position: relative;
    padding: 10px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.calendar-content table {
    border-collapse: collapse;
    border-spacing: 0;
}
.calendar-content th, .calendar-content td {
	border: 1px solid #d3d3d3;
    width: 36px;
    height: 30px;
    padding: 5px;
    text-align: center;
}
.calendar-content th {
    font-weight: 400;
    color: #333;
}
.calendar-content td {
    position: relative;
    cursor: pointer;
    transition-duration: .3s;
    -webkit-transition-duration: .3s;
}
.calendar-content td:hover {
    background-color: #eaeaea;
    color: #333;
}
.calendar-content .calendar-day-mark-td {
    height: 33px;
}
.calendar-day-mark {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 33px;
    font-size: 12px;
    overflow: hidden;
}
.calendar-content .weekend {
    color: red;
}
.calendar-disabled {
    background: 0 0!important;
    cursor: not-allowed !important;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.calendar-workday {
    color: white;
    background-color: #080101;
}
.calendar-workday:hover {
    background-color: #080101b3;
}
.calendar-holiday {
    color: white;
    background-color: #f08a8a;
}
.calendar-holiday:hover {
    background-color: #f08a8aab;
}
</style>
<body>
<div id="dpLTE">
    <div class="row form-row">
        <div class="col-md-2 text-center text-muted">
        </div>
        <div class="col-md-3 text-right text-muted">
            请选择年份：
        </div>
        <div class="col-md-3 text-center text-muted">
            <select class="form-control" id="yearSelect"> </select>
        </div>
        <div class="col-md-4 text-center text-muted">
        	<a onclick="initDataByYear()" class="btn btn-default"><i class="fa fa-refresh"></i>&nbsp;初始工作日数据</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 text-center text-muted">
            一月
        </div>
        <div class="col-md-3 text-center text-muted">
            二月
        </div>
        <div class="col-md-3 text-center text-muted">
            三月
        </div>
        <div class="col-md-3 text-center text-muted">
            四月
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 text-center text-muted">
            <div id="month1"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month2"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month3"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month4"></div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 text-center text-muted">
            五月
        </div>
        <div class="col-md-3 text-center text-muted">
            六月
        </div>
        <div class="col-md-3 text-center text-muted">
            七月
        </div>
        <div class="col-md-3 text-center text-muted">
            八月
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 text-center text-muted">
            <div id="month5"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month6"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month7"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month8"></div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 text-center text-muted">
            九月
        </div>
        <div class="col-md-3 text-center text-muted">
            十月
        </div>
        <div class="col-md-3 text-center text-muted">
            十一月
        </div>
        <div class="col-md-3 text-center text-muted">
            十二月
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 text-center text-muted">
            <div id="month9"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month10"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month11"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month12"></div>
        </div>
    </div>

    <div class="row form-row" style="margin-top: 50px;">
        <div class="col-md-12 text-center text-muted">
            工作日查询
        </div>
    </div>

    <div class="row form-row">
        <div class="col-md-2 text-right text-muted">
            请选择日期：
        </div>
        <div class="col-md-2 text-center text-muted">
            <input class="form-control" id="dateSelect" type="text"/>
        </div>
        <div class="col-md-2 text-right text-muted">
            请输入工作日偏移天数：
        </div>
        <div class="col-md-2 text-right text-muted">
            <input class="form-control" id="days" type="number"/>
        </div>
        <div class="col-md-1 text-left text-muted">
            <a href="javascript:inputChange();" class="btn btn-primary">查询</a>
        </div>
        <div class="col-md-2 text-right text-muted">
            <input class="form-control" id="result" type="text" readonly="readonly"/>
        </div>
    </div>


    <div class="row form-row" style="margin-top: 50px;">
        <div class="col-md-12 text-center text-muted">
            自然日查询
        </div>
    </div>
    <div class="row form-row">
        <div class="col-md-2 text-right text-muted">
            请选择日期：
        </div>
        <div class="col-md-2 text-center text-muted">
            <input class="form-control" id="natureDateSelect" type="text"/>
        </div>
        <div class="col-md-2 text-right text-muted">
            请输入自然日偏移天数：
        </div>
        <div class="col-md-2 text-right text-muted">
            <input class="form-control" id="natureDays" type="number"/>
        </div>
        <div class="col-md-1 text-left text-muted">
            <a href="javascript:natureInputChange();" class="btn btn-primary">查询</a>
        </div>
        <div class="col-md-2 text-right text-muted">
            <input class="form-control" id="natureResult" type="text" readonly="readonly"/>
        </div>
    </div>

    <div class="row" style="margin-top: 50px;">

    </div>
</div>

<div th:include="include/footer_js::footer"></div>

<script type="text/javascript">
    $(function() {
        var year = formatDate(new Date(), 'yyyy');
        var data = {};
        var nextYear = year * 1 + 1;
        //下拉框范围：从2024年开始，到当前年份+1
        for (var i = 2024; i <= nextYear; i++) {
            data[i] = i;
        }

        // 初始化系统参数,选择年
        $('#yearSelect').selectBindEx({
            data: data,
            placeholder: '请选择年份',
            value: 'stringValue',
            text: 'name',
            allowClear: false,
            selected: [year],
            change: function (data) {
                initByYear(data);
            }
        });
        initByYear(year);

        laydate.render({
            elem: '#dateSelect',
            trigger: 'click',
            position: 'fixed',
            type: 'date',
            value: new Date(),
            format: 'yyyy-MM-dd'
        });

        laydate.render({
            elem: '#natureDateSelect',
            trigger: 'click',
            position: 'fixed',
            type: 'date',
            value: new Date(),
            format: 'yyyy-MM-dd'
        });

    });

    function initByYear(year) {
        var markDayData = [];
        $.SetForm({
            url: '../../system/workDay/listByYear?year=' + year + '&_=' + $.now(),
            param: {},
            async: false,
            success: function (data) {
                markDayData = data;
            }
        });

        // 月份
        for(var i = 1; i <= 12; i++) {

            // 渲染月份html结构
            renderMonthHtml(i);

            // 表格中显示日期
            showCalendarData(year, i, markDayData);
        }
    }

    /**
     * 渲染月份html结构
     */
    function renderMonthHtml(month) {
        var calendar = $('#month' + month);

        calendar.empty();

        // 设置表格区的html结构
        var _theadHtml = '<thead>' +
            '<tr>' +
                '<th class="weekend">日</th>' +
                '<th>一</th>' +
                '<th>二</th>' +
                '<th>三</th>' +
                '<th>四</th>' +
                '<th>五</th>' +
                '<th class="weekend">六</th>' +
            '</tr>' +
        '</thead>';

        // 一个月最多31天，所以一个月最多占6行表格
        var _tbodyHtml = '<tbody>';
        for(var i = 0; i < 6; i++) {
            _tbodyHtml += '<tr>' +
                '<td></td>' +
                '<td></td>' +
                '<td></td>' +
                '<td></td>' +
                '<td></td>' +
                '<td></td>' +
                '<td></td>' +
            '</tr>';
        }
        _tbodyHtml += '</tbody>';

        // 表格div
        var _boxHtml = '<div class="calendar-box">' +
            '<div class="calendar-content">' +
                '<table>' +
                _theadHtml +
                _tbodyHtml +
                '</table>' +
            '</div>' +
        '</div>';

        // 添加到节点中
        calendar.html(_boxHtml);
    }

    /**
     * 表格中显示数据，并设置类名
     */
    function showCalendarData(year, month, markDayData) {

        // 设置表格中的日期数据
        var _table = $('#month' + month + ' table');
        var _tds = _table.find("td");
        var _firstDate = new Date(year, month - 1, 1);  // 当前月第一天
        for(var i = 0; i < _tds.length; i++) {
            var _td = $(_tds[i]);
            var _markHtml = '<span>&nbsp;</span>';

            // 日期编号
            // < 0，代表是上个月的日期
            // > 0，代表是这个月的日期
            // > 31，代表是下个月的日期，如1月有31天，超过31号的，是下个月2月
            var dayNumber = i + 1 - _firstDate.getDay();

            var _thisDate = new Date(year, month - 1, dayNumber); // 当前日期
            var _thisDateStr = formatDate(_thisDate, 'yyyy-MM-dd'); // 格式化，年月日
            var day = _thisDate.getDate(); // 当前日期，几号

            // 不可点击（默认）
            _td.addClass("calendar-disabled");
            _td.html(_markHtml);

            // 只显示当前月
            if (_thisDate.getMonth() == month - 1) {
                _markHtml = '<span>' + day + '</span>';
                _td.html(_markHtml);

                _td.removeClass("calendar-disabled"); //可点击
                _td.attr('id', _thisDateStr); // id，年月日
                _td.attr('title', _thisDateStr);
                _td.attr('year', year); // 年
                _td.attr('month', month); // 月
                _td.attr('day', day); // 日
                _td.attr('onclick', 'editDay(this)');

                // 特殊日期
                for (var j = 0; j < markDayData.length; j++) {
                    var mItem = markDayData[j];
                    var mdate = mItem.year + '-' + mItem.month + '-' + mItem.day;

                    // 日期一致
                    if (_thisDateStr == mdate) {
                        _td.addClass("calendar-day-mark-td");

                        // 存在特殊日期名称
                        if (mItem.name) {

                            if (mItem.type == 1) {
                                // 工作日
                                _markHtml = '<span class="calendar-day-mark calendar-workday">' + mItem.name + '</span>';
                                _td.html(_markHtml);

                            } else if (mItem.type == 2) {

                                // 节假日
                                _markHtml = '<span class="calendar-day-mark calendar-holiday">' + mItem.name + '</span>';
                                _td.html(_markHtml);
                            }
                        }

                        break;
                    }
                }

            }
        }
    }

    function editDay(obj) {
        var id = $(obj).attr('id');
        var year = $(obj).attr('year');

        dialogOpen({
            title: '修改工作日配置',
            url: 'system/workDay/workDayEdit.html?_' + $.now(),
            width: '600px',
            height: '400px',
            scroll : true,
            success: function(iframeId){
                top.frames[iframeId].vm.workDay.id = id;
                top.frames[iframeId].vm.setForm();
            },
            yes : function(iframeId) {
                // 子页面传值到父页面
                var result = top.frames[iframeId].vm.acceptClick();
                if (result) {
                    var temp = {};
                    Object.assign(temp, result);

                    $.ConfirmForm({
                        url: '../../system/workDay/saveWorkDay?_=' + $.now(),
                        param: temp,
                        close : false,
                        success: function(data) {
                            initByYear(year);
                            dialogCloseById(iframeId);
                        }
                    });
                }
            }
        });
    }

    function initDataByYear() {
        var year = $('#yearSelect').val();
        
        $.ConfirmForm({
            msg: '您是否要初始'+year+'年工作日数据？',
            url: '../../system/workDay/initDataByYear?year=' + year + '&_=' + $.now(),
            param: {},
            async: false,
            success: function (data) {
                initByYear(year);
            }
        });
    }

    function inputChange() {
        var result = getWorkDayAfterByDate($("#dateSelect").val(), $("#days").val());
        $("#result").val(result);
    }

    function natureInputChange() {
        var result = dateAddDays($("#natureDateSelect").val(), $("#natureDays").val());
        $("#natureResult").val(result);
    }

</script>
</body>
</html>

2.工作日查询、自然日查询 js


/**
 * [dateAddDays 从某个日期增加n天后的日期]
 * @param  {[string]} dateStr  [日期字符串]
 * @param  {[int]} dayCount [增加的天数]
 * @return {[string]}[增加n天后的日期字符串]
 */
function dateAddDays(dateStr,dayCount) {
	var tempDate=new Date(dateStr.replace(/-/g,"/"));//把日期字符串转换成日期格式
	var resultDate=new Date((tempDate/1000+(86400*dayCount))*1000);//增加n天后的日期
	return formatDate(resultDate, "yyyy-MM-dd");
}

/**
 * 查询工作日
 * @param date 时间，格式：yyyy-MM-dd，为空将使用当前时间
 * @param days 偏移量，整数，为正向后偏移，为负向前偏移
 * @returns {*}
 */
function getWorkDayAfterByDate(date, days) {
    if (isNullOrEmpty(date)) {
        date = formatDate(new Date(), 'yyyy-MM-dd');
    }
    if (isNullOrEmpty(days)) {
        return;
    }
    var result;
    $.SetForm({
        url: '../../system/workDay/getWorkDayAfterByDate?date=' + date + '&days=' + days + '&_=' + $.now(),
        param: {},
        async: false,
        success: function (data) {
            result = data;
        }
    });
    return result;
}

3.修改工作日配置

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/header_css::header('编辑-工作日配置')"></head>
<body>
	<div id="dpLTE" class="container-fluid" v-cloak>
		<table class="form" id="form">
			<colgroup>
				<col width="20%" />
			</colgroup>
			<tr>
				<td class="formTitle">日期</td>
				<td class="formValue">{{ workDay.year }}-{{ workDay.month }}-{{ workDay.day }}</td>
			</tr>
			<tr>
				<td class="formTitle">工作日名称</td>
				<td class="formValue">
					<input v-model.trim="workDay.name" type="text" class="form-control" placeholder="请输入工作日名称" errormsg="工作日名称" />
				</td>
			</tr>
			<tr>
				<td class="formTitle">备注</td>
				<td class="formValue">
					<input v-model.trim="workDay.descn" type="text" class="form-control" placeholder="请输入备注" errormsg="备注" />
				</td>
			</tr>
			<tr>
				<td class="formTitle">工作日类型</td>
				<td class="formValue">
					<label class="radio-inline">
						<input type="radio" name="holidayType" value="0" v-model="workDay.holidayType" isvalid="yes" checkexpession="NotNull"/> 工作日
					</label> 
					<label class="radio-inline">
						<input type="radio" name="holidayType" value="1" v-model="workDay.holidayType" isvalid="yes" checkexpession="NotNull"/> 周末
					</label> 
					<label class="radio-inline">
						<input type="radio" name="holidayType" value="2" v-model="workDay.holidayType" isvalid="yes" checkexpession="NotNull"/> 节日
					</label>
					<label class="radio-inline">
						<input type="radio" name="holidayType" value="3" v-model="workDay.holidayType" isvalid="yes" checkexpession="NotNull"/> 调休
					</label>
				</td>
			</tr>
		</table>
	</div>
	<div th:include="include/footer_js::footer"></div>
	<script type="text/javascript">
	var vm = new Vue({
		el:'#dpLTE',
		data: {
			workDay: {
				id: null,
				year: null,
                month: null,
                day: null,
                holidayType: 0,
			}
		},
		methods : {
			setForm: function() {
			    var param = {
					id: vm.workDay.id
			    };
				$.SetForm({
					url: '../../system/workDay/getInfoByDate?_' + $.now(),
			    	param: param,
			    	success: function(data) {
			    	    if (data) {
				    		vm.workDay = data;
			    	    }
			    	}
				});
			},
			acceptClick: function() {
				if (!$('#form').Validform()) {
			        return false;
			    }
				
				return vm.workDay;
			}
		}
	})

	</script>
</body>
</html>

4.数据库，表结构

工作日配置表
字段名类型长度主键注释
idvarchar36是

主键id

年月日拼接

如：2024-01-01

yearvarchar10否年份
monthvarchar2否月份
dayvarchar2否天
namevarchar200否名称
weekint2否星期几（1-7）
week_meanvarchar20否

星期几（1-7）

文本，如：星期一

typeint2否

类型

1：工作日

2：非工作日/节假日

默认为工作日

holiday_typeint2否

节假日类型：

0：工作日

1：周末

2：节日

3：调休

oper_user_idvarchar36否操作用户id
descnvarchar200否备注
cdatedatetime0否创建时间
ldatedatetime0否修改时间
statusint2否

状态：

1：有效

0：无效

 sql脚本：

CREATE TABLE `t_work_day` (
  `id` varchar(36) NOT NULL COMMENT '主键id',
  `year` varchar(10) DEFAULT NULL COMMENT '年份',
  `month` varchar(2) DEFAULT NULL COMMENT '月份',
  `day` varchar(2) DEFAULT NULL COMMENT '天',
  `name` varchar(200) DEFAULT NULL COMMENT '名称',
  `week` int(2) DEFAULT NULL COMMENT '星期几（1-7）',
  `week_mean` varchar(20) DEFAULT NULL COMMENT '星期几（1-7）',
  `type` int(2) DEFAULT NULL COMMENT '类型（1：工作日；2：非工作日/节假日；默认为工作日）',
  `holiday_type` int(2) DEFAULT NULL COMMENT '节假日类型:0工作日、1周末、2节日、3调休',
  `oper_user_id` varchar(36) DEFAULT NULL COMMENT '操作用户id',
  `descn` varchar(200) DEFAULT NULL COMMENT '备注',
  `cdate` datetime DEFAULT NULL COMMENT '创建时间',
  `ldate` datetime DEFAULT NULL COMMENT '修改时间',
  `status` int(2) DEFAULT NULL COMMENT '状态',
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE KEY `year_month_day` (`year`,`month`,`day`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='工作日配置表';

数据如下：

5.初始化数据

工作日数据由第三方初始化获取 ，参考：

工作日API文档：http://timor.tech/api/holiday

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12776.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

期末总结

2024-06-29 19:06:42

爱心

2024-06-27 17:06:24

表白代码

2024-06-27 16:06:42

html5 css3 前端基础认识。

2024-06-26 23:06:18

HTML5 使用技巧分享 4 —— 将一行元素快速置于屏幕底部

2024-06-26 23:06:04

CFT Show 信息收集篇

2024-06-26 23:06:28

关于HTML5表单验证的方法教程

2024-06-26 23:06:28

JavaScript与HTML5 Video API交互从视频中截取当前播放画面

2024-06-26 23:06:27

2024年前端最新【四万字总结】对于HTML5的一些总结与实践，Web前端内存优化面试题

2024-06-26 23:06:58

2024年Web前端最新值得html初学者收藏的响应式前端开发框架，前端动态换肤实现原理解析

2024-06-26 23:06:49

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！