原生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 完整代码如下：
点击查看代码/*! * 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
页:
[1]