原生JS实现一个日期选择器（DatePicker）组件

这是通过原生HTML/CSS/JavaScript完成一个日期选择器（datepicker）组件，一个纯手搓的组件的开发。主要包括datepicker静态结构的编写、日历数据的计划获取、组件的渲染以及组件事件的处理。
根据调用时的时间格式参数，可以控制短日期格式或长日期格式。
实现效果（短日期格式）实现效果（长日期格式）

完整代码包含4个文件：

• JavaScript实现功能代码全部在 datepicker-v1.20250113.js 文件
  
• CSS实现样式渲染代码全部在 datepicker-v1.20250113.css 文件
  
• HTML实现一个调用demo 在 datepicker.html 文件
  
• 另外就是 输入框的小图标 calendar-icon.png
  

datepicker-v1.20250113.js 完整代码如下：
点击查看代码[code]/*! * datepicker Library v1.0 * * Copyright 2025, xiongzaiqiren * Date: Mon Jan 13 2025 11:27:27 GMT+0800 (中国标准时间) */; (function () {    var datepicker = {        paramsDate: function (inputElement, targetFormat) {            this.inputElement = inputElement; // 当前输入框            this.targetFormat = targetFormat || 'yyyy/MM/dd HH:mm:ss'; // 目标日期时间格式            this.monthData = {}; // 绘制日历组件的数据源            this.sureTime = { year: 0, month: 0, date: 0, hour: -1, minute: -1, second: -1 }; // 确定的选中的日期时间，或者初始化到某个时刻，或者是初始化到当前时刻。这里时分秒必需初始化小于0,后米面才好判断是否要构建时分秒控件        },        getMonthDate: function (year, month) {            var ret = [];            if (!year || !month) {                var today = new Date();                year = today.getFullYear();                month = today.getMonth() + 1;            }            var firstDay = new Date(year, month - 1, 1);//获取当月第一天            var firstDayWeekDay = firstDay.getDay();//获取星期几，才好判断排在第几列            if (0 === firstDayWeekDay) {//周日                firstDayWeekDay = 7;            }            year = firstDay.getFullYear();            month = firstDay.getMonth() + 1;            var lastDayOfLastMonth = new Date(year, month - 1, 0);//获取最后一天            var lastDateOfLastMonth = lastDayOfLastMonth.getDate();            var preMonthDayCount = firstDayWeekDay - 1;            var lastDay = new Date(year, month, 0);            var lastDate = lastDay.getDate();            for (var i = 0; i < 7 * 6; i++) {                var date = i + 1 - preMonthDayCount;                var showDate = date;                var thisMonth = month;                //上一月                if (0 >= date) {                    thisMonth = month - 1;                    showDate = lastDateOfLastMonth + date;                } else if (date > lastDate) {                    //下一月                    thisMonth = month + 1;                    showDate = showDate - lastDate;                }                if (0 === thisMonth) {                    thisMonth = 12;                }                if (13 === thisMonth) {                    thisMonth = 1;                }                ret.push({                    month: thisMonth,                    date: date,                    showDate: showDate                })            }            return {                year: year,                month: month,                days: ret            };        }    };     window.datepicker = datepicker;//该函数唯一暴露的对象    })();/***** main.js *****/(function () {     var datepicker = window.datepicker;    var $datepicker_wrapper;    //渲染函数，由于没有使用第三方插件或库，所以使用的是模板拼接的方法    datepicker.buildUi = function (monthData, sureTime) {        // monthData = datepicker.getMonthDate(year, month); // year, month, monthData 是面板需要绘画的日期时间集合        var html = '' +            '≪' +            '<' +            '≫' +            '>' +            '' + monthData.year + '-' + monthData.month + '' +            '' +            '' +            '' +            '' +            '' +            '\u4e00' +            '\u4e8c' +            '\u4e09' +            '\u56db' +            '\u4e94' +            '\u516d' +            '\u65e5' +            '' +            '' +            '';        function coreMonth(coreMonth, month) {            return coreMonth == month;        }        function isToday(year, month, date) {            const _today = new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getDate();            return (year + '/' + month + '/' + date) == _today;        }        function sureTimeIsToday(year, month, date, sureTime) {            return (!!sureTime && (sureTime.year === year && sureTime.month === month && sureTime.date === date));        }        for (var i = 0; i < monthData.days.length; i++) {            var date = monthData.days;            if (i % 7 === 0) {                html += '';            }            html += '' + date.showDate + '';            if (i % 7 === 6) {                html += '';            }        }        html += '' +            '' +            '';        function buildTimeOptions(max) {            let _s = '';            for (i = 0; i