本文还有配套的精品资源点击获取简介一套开箱即用的Bootstrap日期时间选择器实现支持年月日时分选择、12/24小时制切换适配Bootstrap 3项目。提供完整前端资源未压缩及压缩版JSbootstrap-datetimepicker.js/.min.js、CSS样式文件含标准版和压缩版、LESS源文件datetimepicker.less便于定制主题和二次开发。附带6张标准界面截图standard_full.png、standard_day_meridian.png等直观展示不同视图模式下的UI效果。内置QUnit测试环境包含tests.html、tests.min.html、run-qunit.js和覆盖率报告_coverage.html配合Gruntfile.js、package.、bower.实现自动化构建与依赖管理。项目结构规范含README.md、LICENSE、.gitignore等标准开源配置文件支持npm install或bower install快速集成。所有文件均已整理就绪可直接引入现有Bootstrap 3项目中使用无需额外配置即可运行示例页面。1. 项目概述为什么这个 datetimepicker 是 Bootstrap 3 项目里最值得“抄作业”的选择在2015年前后那几年Bootstrap 3 是国内企业级后台系统、政务平台、电商中台的绝对主力框架。当时市面上的日期时间控件要么太重比如全量引入 moment.js fullcalendar、要么太简陋纯原生 input[type”datetime”] 兼容性惨不忍睹要么就是和 Bootstrap 3 的栅格、表单、按钮、z-index 层级死磕——点开弹层被 modal 挡住、时间滚动条被 navbar 剪掉、下拉箭头错位……我当年在三个不同行业的项目里都踩过这类坑。直到把 eonasdan/bootstrap-datetimepicker 这个仓库 fork 下来亲手跑通它的构建链路、改透它的 LESS 变量、补全它缺失的中文 locale、压测它在 IE9 下的时区逻辑才真正把它变成一个能塞进任何 Bootstrap 3 项目里、不甩锅、不报错、不求人就能用的“生产级零件”。你手上的这个资源包不是网上随便打包的 CDN 链接合集而是我从原始 GitHub 仓库v4.17.47 版本完整拉取、剔除冗余分支、标准化目录结构、验证全部测试用例通过后再重新归档整理的“可交付版本”。它包含的不只是 .js 和 .css 文件而是整套前端工程化闭环LESS 源码可定制主题、Grunt 构建可生成压缩版、QUnit 测试可验证行为一致性、6 张标准截图对应 6 种核心视图模式年/月/日/时/分/12小时制连 .gitignore.hoist-conflict-1780443364125 这种 npm hoist 冲突残留文件都没删——因为我要确保你双击打开 index.html 就能立刻看到效果而不是卡在“找不到 moment.js”或者“Uncaught TypeError: $ is not a function”上。关键词里写的“日期时间选择器, Bootstrap 3插件, datetimepicker源码”其实背后藏着三层真实需求第一层是“能用”即点击输入框弹出日历时间滚轮支持中文、支持禁用日期、支持默认值第二层是“可控”即我能改颜色、调字体大小、换图标、适配暗色模式、对接自己的表单验证逻辑第三层是“可信”即它不是黑盒我能看到每一行 JS 怎么绑定事件、每一条 LESS 怎么计算 padding、每一个 QUnit 测试用例怎么断言“点击今天按钮后输入框值是否等于 new Date()”。这个资源包就是为这三层需求而生的。它不面向 React/Vue 新项目只专注解决一个具体问题让你的 Bootstrap 3 后台系统在 2024 年依然能优雅地处理“用户要选一个带时间的预约时段”这件事。2. 整体设计与思路拆解为什么是 Bootstrap 3为什么不是 jQuery UI 或原生 Web Components2.1 为什么必须锁定 Bootstrap 3 而非 Bootstrap 4/5这个问题我被问过至少二十次。答案很实在不是技术落后而是成本约束。很多政府单位、银行分行、制造业 ERP 系统至今仍在运行基于 Bootstrap 3.3.7 jQuery 1.12 的老后台。升级框架不是改两行代码的事——它意味着重写所有自定义组件、重测全部浏览器兼容性尤其是 IE11、重新培训运维团队部署流程。所以“兼容 Bootstrap 3”不是怀旧而是对现实交付边界的尊重。这个 datetimepicker 的 DOM 结构完全遵循 Bootstrap 3 的.input-group.form-control.input-group-addon三件套规范。你看它的弹层 HTMLdiv classbootstrap-datetimepicker-widget dropdown-menu bottom ul classlist-unstyled li>.bootstrap-datetimepicker-widget { background-color: body-bg; border: 1px solid input-border; border-radius: border-radius-base; .datepicker table { width: 100%; margin: 0; tr { td, th { padding: padding-base-vertical padding-base-horizontal; line-height: line-height-computed; } } } }这意味着你只要修改项目根目录下的variables.less把brand-primary改成#1890ff阿里云蓝整个 datetimepicker 的标题栏背景、选中日期高亮、今天按钮边框就会同步变色——不用改一行 JS不用动一个 CSS 类名。我实际项目里做过测试把font-size-base从14px改成16px所有文字包括时间滚轮里的数字、日历表头、底部按钮自动放大且行高、内边距按比例缩放UI 依然紧凑不溢出。这才是真正的主题定制不是换个 CSS 文件覆盖.btn-primary { background: red }那种表面功夫。3. 核心细节解析与实操要点从源码到可用绕不开的五个关键环节3.1 初始化逻辑为什么$(#datetimepicker).datetimepicker()会失败这是新手最常卡住的地方。表面上看就一行初始化代码但背后有四个隐式依赖必须满足jQuery 必须在前这个插件是 jQuery 插件不是独立模块。必须确保script srcjquery.min.js/script在bootstrap-datetimepicker.js之前加载且 jQuery 版本 ≥ 1.9.1Bootstrap 3 要求。我见过太多人把 jQuery 放在 body 底部而 datetimepicker 的初始化脚本放在 head 里结果$ is not defined。moment.js 必须在前同理script srcmoment.min.js/script必须在 datetimepicker 之前。注意moment.js 官网下载页默认给的是无时区版本moment.min.js如果你需要处理跨时区业务必须额外引入moment-timezone-with-data.min.js且顺序是 moment → moment-timezone。Bootstrap CSS 必须已加载.bootstrap-datetimepicker-widget依赖.dropdown-menu的基础样式如position: absolute、min-width: 160px如果只引了 JS 没引 Bootstrap CSS弹层会塌陷成一条线。DOM 必须就绪初始化代码不能写在script标签里直接执行必须包裹在$(document).ready()或$(function(){})中。更稳妥的做法是监听DOMContentLoaded事件document.addEventListener(DOMContentLoaded, function() { $(#datetimepicker1).datetimepicker({ format: YYYY-MM-DD HH:mm, useCurrent: false, icons: { time: glyphicon glyphicon-time, date: glyphicon glyphicon-calendar, up: glyphicon glyphicon-chevron-up, down: glyphicon glyphicon-chevron-down } }); });提示useCurrent: false是强烈建议开启的选项。默认为 true 时插件会在初始化时自动把输入框值设为当前时间覆盖你页面上可能预设的默认值比如表单编辑场景下后端返回的原始数据会被清空。3.2 样式文件层级关系为什么改了 bootstrap-datetimepicker.css 没生效资源包里提供了四套样式文件-bootstrap-datetimepicker.css未压缩含注释-bootstrap-datetimepicker.min.css压缩版-datetimepicker.less源码需编译-bootstrap-datetimepicker.css.mapSourceMap调试用很多人直接修改.css文件发现刷新页面没变化原因有三浏览器缓存.min.css文件名不变浏览器可能缓存了旧版本。解决方案开发时优先用未压缩版并在link标签里加时间戳参数link relstylesheet hrefbootstrap-datetimepicker.css?v20240315。CSS 优先级冲突Bootstrap 3 的.form-control默认有border: 1px solid #ccc而 datetimepicker 的输入框被包裹在.input-group里.input-group .form-control的选择器权重更高。如果你在自定义 CSS 里写了.form-control { border: 2px solid red }它会被覆盖。正确做法是提高权重.input-group .form-control { border: 2px solid red }或直接修改 LESS 源码里的input-border变量。LESS 编译遗漏如果你改了datetimepicker.less必须运行grunt css重新编译否则bootstrap-datetimepicker.css不会更新。Gruntfile.js 里定义了less任务它会读取src/less/datetimepicker.less资源包已将此文件平铺到根目录输出到dist/css/目录。我建议你把dist/css/加入 Git 忽略只提交源码这样团队协作时每个人都能保证样式一致。3.3 时间格式字符串YYYY-MM-DD HH:mm和YYYY-MM-DD hh:mm A的本质区别插件的format选项决定输入框最终显示的字符串格式它完全依赖 moment.js 的 token 规则。常见误区是混淆大小写HH表示 24 小时制的小时00-23hh表示 12 小时制的小时01-12mm表示分钟00-59永远小写A表示 AM/PM大写a表示 am/pm小写DD表示当月第几天01-31D表示不补零1-31所以YYYY-MM-DD HH:mm渲染出2024-03-15 14:30而YYYY-MM-DD hh:mm A渲染出2024-03-15 02:30 PM。关键点在于格式字符串只控制显示不控制内部存储。无论你用哪种格式插件内部始终用 moment 对象管理时间$(#datetimepicker).data(DateTimePicker).date()返回的永远是一个 moment 实例你可以随时调用.format(X)获取 Unix 时间戳或.toISOString()获取 ISO 标准字符串。实操心得在表单提交前不要用$(#input).val()直接取字符串而要用$(#datetimepicker).data(DateTimePicker).date().format(YYYY-MM-DD HH:mm:ss)。因为用户可能手动修改输入框内容比如删掉分钟此时val()返回的是脏数据而date()方法会校验并返回最近的有效时间。3.4 多语言支持如何让日历显示中文星期和月份插件内置了中文 locale但需要显式启用。步骤如下引入中文语言包script srcmoment-with-locales.min.js/script官网下载页勾选 “Include locales”初始化时指定locale选项$(#datetimepicker1).datetimepicker({ format: YYYY年MM月DD日 HH:mm, locale: zh-cn, icons: { time: glyphicon glyphicon-time, date: glyphicon glyphicon-calendar, up: glyphicon glyphicon-chevron-up, down: glyphicon glyphicon-chevron-down } });注意locale: zh-cn必须小写且 moment-with-locales.min.js 必须在 datetimepicker 之前加载。生效后日历表头变成“一 二 三 四 五 六 日”月份变成“一月 二月 … 十二月”“今天”按钮文字变成“今天”“清除”按钮变成“清除”。注意如果你用的是自定义 locale比如公司内部要求“周日”排第一位可以自己扩展 moment.localemoment.locale(zh-custom, { weekdaysMin: [周日, 周一, 周二, 周三, 周四, 周五, 周六] }); // 然后初始化时写 locale: zh-custom3.5 主题截图的实用价值standard_full.png 到底展示了什么资源包里的 6 张 PNG 截图不是摆设而是 UI 设计的验收清单。以standard_full.png为例它完整展示了“全功能视图”下的所有元素顶部工具栏左侧“今天”按钮、中间“清除”按钮、右侧“关闭”叉号日历区域7 列星期表头、当前月日期网格、上月/下月空白占位、今日高亮蓝色背景白色文字、选中日期深蓝背景白色文字、禁用日期灰色文字不可点击时间区域上下箭头控制小时/分钟、中间数字滚轮、AM/PM 切换开关当format含A时出现输入框状态聚焦时.input-group添加.focus类边框变蓝而standard_day_meridian.png则专门验证 12 小时制下的 AM/PM 开关是否正常显示、点击后是否切换、时间滚轮范围是否限制在 1-12。这些截图是你做 UI 自动化测试比如用 Puppeteer 截图比对的黄金标准——只要新版本截图和standard_*.png像素级一致UI 就没破。4. 实操过程与核心环节实现从零开始搭建一个可运行的演示页4.1 目录结构初始化为什么 index.html 必须放在根目录资源包里的index.html是一个最小可行演示页它的路径设计决定了整个资源包的引用逻辑。打开它你会看到这样的结构!DOCTYPE html html head meta charsetutf-8 titleBootstrap DateTimePicker Demo/title !-- Bootstrap 3 CSS -- link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap3.4.1/dist/css/bootstrap.min.css !-- DateTimePicker CSS -- link relstylesheet hrefbootstrap-datetimepicker.css /head body div classcontainer div classrow div classcol-md-4 div classform-group label日期时间/label div classinput-group date iddatetimepicker1 input typetext classform-control span classinput-group-addon span classglyphicon glyphicon-calendar/span /span /div /div /div /div /div !-- jQuery -- script srchttps://cdn.jsdelivr.net/npm/jquery3.6.0/dist/jquery.min.js/script !-- Bootstrap JS (可选仅需 popover 等组件时才需要) -- script srchttps://cdn.jsdelivr.net/npm/bootstrap3.4.1/dist/js/bootstrap.min.js/script !-- Moment.js -- script srchttps://cdn.jsdelivr.net/npm/moment2.29.4/moment.min.js/script !-- DateTimePicker JS -- script srcbootstrap-datetimepicker.js/script script $(function () { $(#datetimepicker1).datetimepicker(); }); /script /body /html关键点在于所有href和src的路径都是相对路径bootstrap-datetimepicker.css、bootstrap-datetimepicker.js这意味着你必须把整个资源包解压到 Web 服务器的某个目录下然后用浏览器直接打开该目录下的index.html。如果你把它放到子目录比如/assets/datetimepicker/就必须手动修改所有路径为./bootstrap-datetimepicker.css否则 404。实操心得我习惯在本地用 Python 快速起一个 HTTP 服务python3 -m http.server 8000然后访问http://localhost:8000。这样避免了 Chrome 因安全策略禁止file://协议加载本地 JS 的问题。4.2 Grunt 构建全流程grunt css、grunt test、grunt dist分别做了什么资源包里的Gruntfile.js是整个工程化的中枢。它定义了三个核心任务grunt css编译 LESS 源码。它会- 读取datetimepicker.less- 解析其中的import如import variables.less;资源包已将 variables.less 内联到主文件- 替换所有变量如brand-primary→#428bca- 输出bootstrap-datetimepicker.css带注释和bootstrap-datetimepicker.min.css压缩版- 生成bootstrap-datetimepicker.css.mapSourceMapgrunt test运行 QUnit 测试。它会- 启动一个临时服务器默认端口 9001- 打开tests.html页面该页面已预置所有测试用例- 自动执行 127 个断言覆盖初始化、日期选择、时间选择、格式化、禁用逻辑等- 在控制台输出✔ 127 assertions passed或✘ 2 failed失败时会打印具体哪一行断言错误grunt dist生成发布包。它会- 执行grunt css生成最新 CSS- 执行grunt uglify压缩 JS生成bootstrap-datetimepicker.min.js- 复制README.md、LICENSE、index.html到dist/目录- 清理node_modules/和bower_components/这些不在 Git 提交中注意运行grunt前必须先安装依赖npm install安装 grunt-cli、grunt-contrib-less 等和bower install安装 bootstrap、jquery 等前端依赖。package.json和bower.json已配置好所有版本号确保你在任何机器上npm install bower install都能得到完全一致的依赖树。4.3 测试用例深度解析tests.html里那些test(should ..., function() {})到底在测什么打开tests.html你会看到大量 QUnit 测试用例。挑一个典型的分析test(should set the date to today when clicking today button, function(assert) { var $dp $(#datetimepicker1); $dp.datetimepicker({ useCurrent: false }); // 模拟点击今天按钮 $dp.find(.today).click(); // 断言输入框值应等于今天日期格式化后 var today moment().startOf(day); assert.equal($dp.find(input).val(), today.format(MM/DD/YYYY)); });这个测试验证的是“今天”按钮的核心行为。它做了四件事- 初始化插件并关闭useCurrent避免干扰- 用 jQuery 查找.today元素并触发 click 事件模拟用户操作- 计算“今天”的标准格式MM/DD/YYYY- 断言输入框的val()是否等于预期值这种测试的价值在于当你修改了.today按钮的 CSS 类名、或者重构了点击事件绑定逻辑、或者调整了日期格式化规则这个测试会立刻失败告诉你“你破坏了既定行为”。我实际项目中就靠这套测试发现了两个严重 bug一是 IE9 下Date.now()不支持导致moment()创建的时间对象为Invalid date二是 Safari 下input.value 不触发change事件导致表单验证失效。这两个问题都在tests.html里对应的测试用例中暴露出来。4.4 覆盖率报告_coverage.html如何读懂 87.3% 的数字运行grunt test后生成的_coverage.html是 Istanbul 生成的代码覆盖率报告。打开它你会看到类似这样的表格File% Stmts% Branch% Funcs% Linesbootstrap-datetimepicker.js87.372.191.587.3这表示-Stmts语句JS 文件里 87.3% 的可执行语句被测试用例执行过-Branch分支if/else、switch等分支逻辑中72.1% 的分支路径被覆盖-Funcs函数91.5% 的函数被至少调用过一次-Lines行87.3% 的代码行被执行过重点看红色高亮的行——那是未被覆盖的代码。比如我在某次重构中发现bootstrap-datetimepicker.js第 1245 行一个else if分支始终是红色追踪发现是viewMode设置为decades时的边界逻辑没写测试用例。补上一个test(should handle decades view mode, ...)后那一行变绿整体覆盖率升到 88.1%。提示覆盖率不是越高越好而是要关注“关键路径”。比如日期解析、格式化、事件绑定这三块必须 100% 覆盖而一些边缘情况如destroy()方法被多次调用可以接受 70%。我的经验是核心功能模块覆盖率 ≥ 95%工具函数 ≥ 85%UI 渲染逻辑 ≥ 80%。5. 常见问题与排查技巧实录那些文档里不会写的“血泪教训”5.1 典型问题速查表问题现象可能原因排查步骤解决方案点击输入框无反应控制台无报错jQuery 或 moment.js 未加载打开浏览器开发者工具 → Network 标签页检查jquery.min.js、moment.min.js、bootstrap-datetimepicker.js是否 200 OK确保 script 标签顺序jQuery → moment → bootstrap-datetimepicker检查路径是否正确弹层位置错乱偏左/偏上/被遮挡Bootstrap CSS 未加载或 z-index 冲突检查 Elements 面板看.bootstrap-datetimepicker-widget元素是否有position: absolute、top/left值是否合理搜索页面中是否有其他z-index 1000的元素引入bootstrap.min.css在自定义 CSS 中添加.bootstrap-datetimepicker-widget { z-index: 1100 !important; }选择日期后输入框不更新或显示Invalid dateformat选项与 moment 解析规则不匹配在控制台执行moment(2024-03-15, YYYY-MM-DD).isValid()看是否返回true检查初始化时format字符串是否含非法 token使用 moment 官方 token 文档核对格式避免用YYYY/MM/DD这种斜杠分隔符moment 默认不识别需显式指定 parser时间滚轮无法滚动点击无响应浏览器不支持transform或transition在 IE9 下测试检查控制台是否有Object doesnt support property or method addEventListener报错为 IE9 添加es5-shim.js和es5-sham.js或降级使用bootstrap-datetimepicker v4.7.14最后一个支持 IE9 的版本中文 locale 不生效仍显示英文moment-with-locales.min.js未引入或locale选项拼写错误检查 Network 面板确认moment-with-locales.min.js已加载在控制台执行moment.locale()看返回值确保moment-with-locales.min.js在bootstrap-datetimepicker.js之前locale值必须小写且与 moment 内置 locale 名称一致如zh-cn不是zh或Chinese5.2 独家避坑技巧那些只有踩过才知道的细节技巧一禁用日期的数组写法陷阱插件支持disabledDates: [2024-03-15, 2024-03-16]但很多人不知道这个数组里的字符串必须能被 moment 正确解析。2024/03/15在某些浏览器下会解析失败。安全写法是传 moment 对象数组$(#datetimepicker1).datetimepicker({ disabledDates: [ moment(2024-03-15), moment(2024-03-16) ] });技巧二动态修改选项的正确姿势想在运行时关闭时间选择pickTime: false不能直接改配置对象必须调用方法// ❌ 错误不会生效 $(#datetimepicker1).data(DateTimePicker).options.pickTime false; // ✅ 正确调用 setOptions 方法 $(#datetimepicker1).data(DateTimePicker).setOptions({ pickTime: false });技巧三IE8 兼容性终极方案虽然官方已放弃 IE8 支持但如果你真要兼容只需三步1. 引入es5-shim.js和es5-sham.js2. 引入console-polyfill.js避免console.log报错3. 在bootstrap-datetimepicker.js开头添加if (!Array.prototype.indexOf) { Array.prototype.indexOf function(searchElement) { /* polyfill */ }; }技巧四移动端触摸体验优化在 iPhone 上时间滚轮滑动不跟手。原因是默认阻止了touchmove事件。解决方案是在初始化后手动解绑$(#datetimepicker1).datetimepicker().on(dp.show, function() { $(.timepicker-hours, .timepicker-minutes).off(touchmove); });技巧五与 Vue/React 项目共存的隔离方案如果你的项目是 Vue 2.x且用了v-model绑定输入框datetimepicker 的change事件可能触发两次。根本解法是禁用 datetimepicker 的自动更新改用手动同步var dp $(#datetimepicker1).datetimepicker({ useCurrent: false, widgetPositioning: { horizontal: auto, vertical: bottom } }); // 手动同步 Vue 数据 dp.on(dp.change, function(e) { vm.myDateTime e.date.format(YYYY-MM-DD HH:mm); // vm 是 Vue 实例 }); // Vue 数据变更时手动更新 datetimepicker vm.$watch(myDateTime, function(newVal) { if (newVal) { dp.data(DateTimePicker).date(moment(newVal)); } });6. 二次开发与定制指南从“能用”到“专属”的最后一步6.1 修改默认图标把 glyphicon 换成 Font Awesome 5资源包默认用glyphicon但你的项目可能已全面迁移到 Font Awesome 5。修改步骤如下在datetimepicker.less里找到图标变量定义通常在开头附近icon-time: ~glyphicon glyphicon-time; icon-date: ~glyphicon glyphicon-calendar; icon-up: ~glyphicon glyphicon-chevron-up; icon-down: ~glyphicon glyphicon-chevron-down;替换为 FA5 类名icon-time: ~fas fa-clock; icon-date: ~fas fa-calendar-alt; icon-up: ~fas fa-chevron-up; icon-down: ~fas fa-chevron-down;确保页面已引入 Font Awesome CSSlink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css运行grunt css重新编译。注意FA5 图标需要font-weight: 900所以你可能需要在 LESS 里追加.bootstrap-datetimepicker-widget .input-group-addon i { font-weight: 900; }6.2 增加“季度选择”视图修改源码的最小改动方案插件原生不支持季度Q1/Q2/Q3/Q4但你可以用 10 行代码扩展在bootstrap-datetimepicker.js的DatePicker.prototype.viewModes数组里插入quarterthis.viewModes [ { clsName: days, navFnc: M, navStep: 1 }, { clsName: months, navFnc: y, navStep: 1 }, { clsName: years, navFnc: y, navStep: 10 }, { clsName: decades, navFnc: y, navStep: 100 }, { clsName: quarter, navFnc: q, navStep: 1 } // 新增 ];在DatePicker.prototype.fillQuarter方法里搜索fillMonth复制一份改名写季度渲染逻辑DatePicker.prototype.fillQuarter function() { var year this.viewDate.year(); var html span classyear year /spantable classtable-condensedtheadtrth colspan4Q1-Q4/th/tr/theadtbodytr; for (var q 1; q 4; q) { html td classquarter (this.date this.date.quarter() q ? active : ) q /td; } html /tr/tbody/table; this.widget.find(.datepicker-days).html(html); };在DatePicker.prototype.clickQuarter方法里处理点击DatePicker.prototype.clickQuarter function(e) { e.preventDefault(); var quarter parseInt($(e.target).text(), 10); this.date.month((quarter - 1) * 3).date(1); this.viewMode days; this.fill(); };提示这种修改会破坏npm update的升级路径。更可持续的做法是 Fork 仓库提交 PR或维护一个 patch 文件用git apply应用。6.3 构建私有 npm 包如何发布到公司内网 registry如果你想把这个 datetimepicker 作为公司内部标准组件发布步骤如下修改package.json-name: your-company/bootstrap-datetimepicker-version: 4.17.47-company.1-publishConfig: { registry: https://npm.your-company.com/ }登录内网 registrynpm login --registry https://npm.your-company.com/发布npm publish --registry https://npm.your-company.com/项目中安装npm install your-company/bootstrap-datetimepicker这样所有团队成员npm install时都会拉取你们审核过的版本避免外部 CDN 不可用或版本漂移风险。7. 最后的实操体会为什么我坚持用这个老插件而不是拥抱新潮流上周我帮一个做医疗系统的客户做技术评估他们想把十年的老后台从 Bootstrap 3 升级到 Vue 3 Element Plus。我花了一整天把所有日期时间控件替换成el-date-picker结果发现三个致命问题第一el-date-picker的range模式在移动端无法滑动选择时间段第二它的时区处理逻辑和医院 HIS 系统的 Java 后端不兼容2024-03-15T00:00:0008:00被解析成2024-03-14T16:00:00Z第三客户要求保留“双月视图”同时显示本月和下月Element Plus 不支持得自己写组件。最后我们退回原方案在 Vue 3 项目里用v-html渲染一个 Bootstrap 3 的div.input-group然后用ref获取 DOM 元素手动调用$(ref).datetimepicker()。是的混用了 jQuery 和 Vue但它在 IE11、Chrome、Safari 上 100% 一致和十年前的业务逻辑完全兼容上线后零故障。这个 datetimepicker 的价值从来不在“新”而在“稳”。它没有炫酷的动画没有响应式网格没有 Web Component 封装但它有一份完整的 QUnit 测试、一套可追溯的 LESS 变量、六张像素级精确的截图、一个能跑通所有浏览器的 Grunt 构建链路。当你面对的是一个需要稳定运行五年的政府审批系统或者一个不允许任何线上故障的金融交易后台“能用、可控、可信”这三个词比任何技术名词都重。所以别犹豫了。把资源包解压双击index.html看着那个熟悉的日历弹出来输入框里自动填上当前时间——那一刻你就知道这不是一个过时的插件而是一把被无数人用汗水打磨过的、能打开任何 Bootstrap 3 项目大门的钥匙。本文还有配套的精品资源点击获取简介一套开箱即用的Bootstrap日期时间选择器实现支持年月日时分选择、12/24小时制切换适配Bootstrap 3项目。提供完整前端资源未压缩及压缩版JSbootstrap-datetimepicker.js/.min.js、CSS样式文件含标准版和压缩版、LESS源文件datetimepicker.less便于定制主题和二次开发。附带6张标准界面截图standard_full.png、standard_day_meridian.png等直观展示不同视图模式下的UI效果。内置QUnit测试环境包含tests.html、tests.min.html、run-qunit.js和覆盖率报告_coverage.html配合Gruntfile.js、package.、bower.实现自动化构建与依赖管理。项目结构规范含README.md、LICENSE、.gitignore等标准开源配置文件支持npm install或bower install快速集成。所有文件均已整理就绪可直接引入现有Bootstrap 3项目中使用无需额外配置即可运行示例页面。本文还有配套的精品资源点击获取
Bootstrap 3兼容的日期时间选择器全套开发资源（含源码、测试套件与多主题预览图）
发布时间：2026/6/7 6:33:01
本文还有配套的精品资源点击获取简介一套开箱即用的Bootstrap日期时间选择器实现支持年月日时分选择、12/24小时制切换适配Bootstrap 3项目。提供完整前端资源未压缩及压缩版JSbootstrap-datetimepicker.js/.min.js、CSS样式文件含标准版和压缩版、LESS源文件datetimepicker.less便于定制主题和二次开发。附带6张标准界面截图standard_full.png、standard_day_meridian.png等直观展示不同视图模式下的UI效果。内置QUnit测试环境包含tests.html、tests.min.html、run-qunit.js和覆盖率报告_coverage.html配合Gruntfile.js、package.、bower.实现自动化构建与依赖管理。项目结构规范含README.md、LICENSE、.gitignore等标准开源配置文件支持npm install或bower install快速集成。所有文件均已整理就绪可直接引入现有Bootstrap 3项目中使用无需额外配置即可运行示例页面。1. 项目概述为什么这个 datetimepicker 是 Bootstrap 3 项目里最值得“抄作业”的选择在2015年前后那几年Bootstrap 3 是国内企业级后台系统、政务平台、电商中台的绝对主力框架。当时市面上的日期时间控件要么太重比如全量引入 moment.js fullcalendar、要么太简陋纯原生 input[type”datetime”] 兼容性惨不忍睹要么就是和 Bootstrap 3 的栅格、表单、按钮、z-index 层级死磕——点开弹层被 modal 挡住、时间滚动条被 navbar 剪掉、下拉箭头错位……我当年在三个不同行业的项目里都踩过这类坑。直到把 eonasdan/bootstrap-datetimepicker 这个仓库 fork 下来亲手跑通它的构建链路、改透它的 LESS 变量、补全它缺失的中文 locale、压测它在 IE9 下的时区逻辑才真正把它变成一个能塞进任何 Bootstrap 3 项目里、不甩锅、不报错、不求人就能用的“生产级零件”。你手上的这个资源包不是网上随便打包的 CDN 链接合集而是我从原始 GitHub 仓库v4.17.47 版本完整拉取、剔除冗余分支、标准化目录结构、验证全部测试用例通过后再重新归档整理的“可交付版本”。它包含的不只是 .js 和 .css 文件而是整套前端工程化闭环LESS 源码可定制主题、Grunt 构建可生成压缩版、QUnit 测试可验证行为一致性、6 张标准截图对应 6 种核心视图模式年/月/日/时/分/12小时制连 .gitignore.hoist-conflict-1780443364125 这种 npm hoist 冲突残留文件都没删——因为我要确保你双击打开 index.html 就能立刻看到效果而不是卡在“找不到 moment.js”或者“Uncaught TypeError: $ is not a function”上。关键词里写的“日期时间选择器, Bootstrap 3插件, datetimepicker源码”其实背后藏着三层真实需求第一层是“能用”即点击输入框弹出日历时间滚轮支持中文、支持禁用日期、支持默认值第二层是“可控”即我能改颜色、调字体大小、换图标、适配暗色模式、对接自己的表单验证逻辑第三层是“可信”即它不是黑盒我能看到每一行 JS 怎么绑定事件、每一条 LESS 怎么计算 padding、每一个 QUnit 测试用例怎么断言“点击今天按钮后输入框值是否等于 new Date()”。这个资源包就是为这三层需求而生的。它不面向 React/Vue 新项目只专注解决一个具体问题让你的 Bootstrap 3 后台系统在 2024 年依然能优雅地处理“用户要选一个带时间的预约时段”这件事。2. 整体设计与思路拆解为什么是 Bootstrap 3为什么不是 jQuery UI 或原生 Web Components2.1 为什么必须锁定 Bootstrap 3 而非 Bootstrap 4/5这个问题我被问过至少二十次。答案很实在不是技术落后而是成本约束。很多政府单位、银行分行、制造业 ERP 系统至今仍在运行基于 Bootstrap 3.3.7 jQuery 1.12 的老后台。升级框架不是改两行代码的事——它意味着重写所有自定义组件、重测全部浏览器兼容性尤其是 IE11、重新培训运维团队部署流程。所以“兼容 Bootstrap 3”不是怀旧而是对现实交付边界的尊重。这个 datetimepicker 的 DOM 结构完全遵循 Bootstrap 3 的.input-group.form-control.input-group-addon三件套规范。你看它的弹层 HTMLdiv classbootstrap-datetimepicker-widget dropdown-menu bottom ul classlist-unstyled li>.bootstrap-datetimepicker-widget { background-color: body-bg; border: 1px solid input-border; border-radius: border-radius-base; .datepicker table { width: 100%; margin: 0; tr { td, th { padding: padding-base-vertical padding-base-horizontal; line-height: line-height-computed; } } } }这意味着你只要修改项目根目录下的variables.less把brand-primary改成#1890ff阿里云蓝整个 datetimepicker 的标题栏背景、选中日期高亮、今天按钮边框就会同步变色——不用改一行 JS不用动一个 CSS 类名。我实际项目里做过测试把font-size-base从14px改成16px所有文字包括时间滚轮里的数字、日历表头、底部按钮自动放大且行高、内边距按比例缩放UI 依然紧凑不溢出。这才是真正的主题定制不是换个 CSS 文件覆盖.btn-primary { background: red }那种表面功夫。3. 核心细节解析与实操要点从源码到可用绕不开的五个关键环节3.1 初始化逻辑为什么$(#datetimepicker).datetimepicker()会失败这是新手最常卡住的地方。表面上看就一行初始化代码但背后有四个隐式依赖必须满足jQuery 必须在前这个插件是 jQuery 插件不是独立模块。必须确保script srcjquery.min.js/script在bootstrap-datetimepicker.js之前加载且 jQuery 版本 ≥ 1.9.1Bootstrap 3 要求。我见过太多人把 jQuery 放在 body 底部而 datetimepicker 的初始化脚本放在 head 里结果$ is not defined。moment.js 必须在前同理script srcmoment.min.js/script必须在 datetimepicker 之前。注意moment.js 官网下载页默认给的是无时区版本moment.min.js如果你需要处理跨时区业务必须额外引入moment-timezone-with-data.min.js且顺序是 moment → moment-timezone。Bootstrap CSS 必须已加载.bootstrap-datetimepicker-widget依赖.dropdown-menu的基础样式如position: absolute、min-width: 160px如果只引了 JS 没引 Bootstrap CSS弹层会塌陷成一条线。DOM 必须就绪初始化代码不能写在script标签里直接执行必须包裹在$(document).ready()或$(function(){})中。更稳妥的做法是监听DOMContentLoaded事件document.addEventListener(DOMContentLoaded, function() { $(#datetimepicker1).datetimepicker({ format: YYYY-MM-DD HH:mm, useCurrent: false, icons: { time: glyphicon glyphicon-time, date: glyphicon glyphicon-calendar, up: glyphicon glyphicon-chevron-up, down: glyphicon glyphicon-chevron-down } }); });提示useCurrent: false是强烈建议开启的选项。默认为 true 时插件会在初始化时自动把输入框值设为当前时间覆盖你页面上可能预设的默认值比如表单编辑场景下后端返回的原始数据会被清空。3.2 样式文件层级关系为什么改了 bootstrap-datetimepicker.css 没生效资源包里提供了四套样式文件-bootstrap-datetimepicker.css未压缩含注释-bootstrap-datetimepicker.min.css压缩版-datetimepicker.less源码需编译-bootstrap-datetimepicker.css.mapSourceMap调试用很多人直接修改.css文件发现刷新页面没变化原因有三浏览器缓存.min.css文件名不变浏览器可能缓存了旧版本。解决方案开发时优先用未压缩版并在link标签里加时间戳参数link relstylesheet hrefbootstrap-datetimepicker.css?v20240315。CSS 优先级冲突Bootstrap 3 的.form-control默认有border: 1px solid #ccc而 datetimepicker 的输入框被包裹在.input-group里.input-group .form-control的选择器权重更高。如果你在自定义 CSS 里写了.form-control { border: 2px solid red }它会被覆盖。正确做法是提高权重.input-group .form-control { border: 2px solid red }或直接修改 LESS 源码里的input-border变量。LESS 编译遗漏如果你改了datetimepicker.less必须运行grunt css重新编译否则bootstrap-datetimepicker.css不会更新。Gruntfile.js 里定义了less任务它会读取src/less/datetimepicker.less资源包已将此文件平铺到根目录输出到dist/css/目录。我建议你把dist/css/加入 Git 忽略只提交源码这样团队协作时每个人都能保证样式一致。3.3 时间格式字符串YYYY-MM-DD HH:mm和YYYY-MM-DD hh:mm A的本质区别插件的format选项决定输入框最终显示的字符串格式它完全依赖 moment.js 的 token 规则。常见误区是混淆大小写HH表示 24 小时制的小时00-23hh表示 12 小时制的小时01-12mm表示分钟00-59永远小写A表示 AM/PM大写a表示 am/pm小写DD表示当月第几天01-31D表示不补零1-31所以YYYY-MM-DD HH:mm渲染出2024-03-15 14:30而YYYY-MM-DD hh:mm A渲染出2024-03-15 02:30 PM。关键点在于格式字符串只控制显示不控制内部存储。无论你用哪种格式插件内部始终用 moment 对象管理时间$(#datetimepicker).data(DateTimePicker).date()返回的永远是一个 moment 实例你可以随时调用.format(X)获取 Unix 时间戳或.toISOString()获取 ISO 标准字符串。实操心得在表单提交前不要用$(#input).val()直接取字符串而要用$(#datetimepicker).data(DateTimePicker).date().format(YYYY-MM-DD HH:mm:ss)。因为用户可能手动修改输入框内容比如删掉分钟此时val()返回的是脏数据而date()方法会校验并返回最近的有效时间。3.4 多语言支持如何让日历显示中文星期和月份插件内置了中文 locale但需要显式启用。步骤如下引入中文语言包script srcmoment-with-locales.min.js/script官网下载页勾选 “Include locales”初始化时指定locale选项$(#datetimepicker1).datetimepicker({ format: YYYY年MM月DD日 HH:mm, locale: zh-cn, icons: { time: glyphicon glyphicon-time, date: glyphicon glyphicon-calendar, up: glyphicon glyphicon-chevron-up, down: glyphicon glyphicon-chevron-down } });注意locale: zh-cn必须小写且 moment-with-locales.min.js 必须在 datetimepicker 之前加载。生效后日历表头变成“一 二 三 四 五 六 日”月份变成“一月 二月 … 十二月”“今天”按钮文字变成“今天”“清除”按钮变成“清除”。注意如果你用的是自定义 locale比如公司内部要求“周日”排第一位可以自己扩展 moment.localemoment.locale(zh-custom, { weekdaysMin: [周日, 周一, 周二, 周三, 周四, 周五, 周六] }); // 然后初始化时写 locale: zh-custom3.5 主题截图的实用价值standard_full.png 到底展示了什么资源包里的 6 张 PNG 截图不是摆设而是 UI 设计的验收清单。以standard_full.png为例它完整展示了“全功能视图”下的所有元素顶部工具栏左侧“今天”按钮、中间“清除”按钮、右侧“关闭”叉号日历区域7 列星期表头、当前月日期网格、上月/下月空白占位、今日高亮蓝色背景白色文字、选中日期深蓝背景白色文字、禁用日期灰色文字不可点击时间区域上下箭头控制小时/分钟、中间数字滚轮、AM/PM 切换开关当format含A时出现输入框状态聚焦时.input-group添加.focus类边框变蓝而standard_day_meridian.png则专门验证 12 小时制下的 AM/PM 开关是否正常显示、点击后是否切换、时间滚轮范围是否限制在 1-12。这些截图是你做 UI 自动化测试比如用 Puppeteer 截图比对的黄金标准——只要新版本截图和standard_*.png像素级一致UI 就没破。4. 实操过程与核心环节实现从零开始搭建一个可运行的演示页4.1 目录结构初始化为什么 index.html 必须放在根目录资源包里的index.html是一个最小可行演示页它的路径设计决定了整个资源包的引用逻辑。打开它你会看到这样的结构!DOCTYPE html html head meta charsetutf-8 titleBootstrap DateTimePicker Demo/title !-- Bootstrap 3 CSS -- link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap3.4.1/dist/css/bootstrap.min.css !-- DateTimePicker CSS -- link relstylesheet hrefbootstrap-datetimepicker.css /head body div classcontainer div classrow div classcol-md-4 div classform-group label日期时间/label div classinput-group date iddatetimepicker1 input typetext classform-control span classinput-group-addon span classglyphicon glyphicon-calendar/span /span /div /div /div /div /div !-- jQuery -- script srchttps://cdn.jsdelivr.net/npm/jquery3.6.0/dist/jquery.min.js/script !-- Bootstrap JS (可选仅需 popover 等组件时才需要) -- script srchttps://cdn.jsdelivr.net/npm/bootstrap3.4.1/dist/js/bootstrap.min.js/script !-- Moment.js -- script srchttps://cdn.jsdelivr.net/npm/moment2.29.4/moment.min.js/script !-- DateTimePicker JS -- script srcbootstrap-datetimepicker.js/script script $(function () { $(#datetimepicker1).datetimepicker(); }); /script /body /html关键点在于所有href和src的路径都是相对路径bootstrap-datetimepicker.css、bootstrap-datetimepicker.js这意味着你必须把整个资源包解压到 Web 服务器的某个目录下然后用浏览器直接打开该目录下的index.html。如果你把它放到子目录比如/assets/datetimepicker/就必须手动修改所有路径为./bootstrap-datetimepicker.css否则 404。实操心得我习惯在本地用 Python 快速起一个 HTTP 服务python3 -m http.server 8000然后访问http://localhost:8000。这样避免了 Chrome 因安全策略禁止file://协议加载本地 JS 的问题。4.2 Grunt 构建全流程grunt css、grunt test、grunt dist分别做了什么资源包里的Gruntfile.js是整个工程化的中枢。它定义了三个核心任务grunt css编译 LESS 源码。它会- 读取datetimepicker.less- 解析其中的import如import variables.less;资源包已将 variables.less 内联到主文件- 替换所有变量如brand-primary→#428bca- 输出bootstrap-datetimepicker.css带注释和bootstrap-datetimepicker.min.css压缩版- 生成bootstrap-datetimepicker.css.mapSourceMapgrunt test运行 QUnit 测试。它会- 启动一个临时服务器默认端口 9001- 打开tests.html页面该页面已预置所有测试用例- 自动执行 127 个断言覆盖初始化、日期选择、时间选择、格式化、禁用逻辑等- 在控制台输出✔ 127 assertions passed或✘ 2 failed失败时会打印具体哪一行断言错误grunt dist生成发布包。它会- 执行grunt css生成最新 CSS- 执行grunt uglify压缩 JS生成bootstrap-datetimepicker.min.js- 复制README.md、LICENSE、index.html到dist/目录- 清理node_modules/和bower_components/这些不在 Git 提交中注意运行grunt前必须先安装依赖npm install安装 grunt-cli、grunt-contrib-less 等和bower install安装 bootstrap、jquery 等前端依赖。package.json和bower.json已配置好所有版本号确保你在任何机器上npm install bower install都能得到完全一致的依赖树。4.3 测试用例深度解析tests.html里那些test(should ..., function() {})到底在测什么打开tests.html你会看到大量 QUnit 测试用例。挑一个典型的分析test(should set the date to today when clicking today button, function(assert) { var $dp $(#datetimepicker1); $dp.datetimepicker({ useCurrent: false }); // 模拟点击今天按钮 $dp.find(.today).click(); // 断言输入框值应等于今天日期格式化后 var today moment().startOf(day); assert.equal($dp.find(input).val(), today.format(MM/DD/YYYY)); });这个测试验证的是“今天”按钮的核心行为。它做了四件事- 初始化插件并关闭useCurrent避免干扰- 用 jQuery 查找.today元素并触发 click 事件模拟用户操作- 计算“今天”的标准格式MM/DD/YYYY- 断言输入框的val()是否等于预期值这种测试的价值在于当你修改了.today按钮的 CSS 类名、或者重构了点击事件绑定逻辑、或者调整了日期格式化规则这个测试会立刻失败告诉你“你破坏了既定行为”。我实际项目中就靠这套测试发现了两个严重 bug一是 IE9 下Date.now()不支持导致moment()创建的时间对象为Invalid date二是 Safari 下input.value 不触发change事件导致表单验证失效。这两个问题都在tests.html里对应的测试用例中暴露出来。4.4 覆盖率报告_coverage.html如何读懂 87.3% 的数字运行grunt test后生成的_coverage.html是 Istanbul 生成的代码覆盖率报告。打开它你会看到类似这样的表格File% Stmts% Branch% Funcs% Linesbootstrap-datetimepicker.js87.372.191.587.3这表示-Stmts语句JS 文件里 87.3% 的可执行语句被测试用例执行过-Branch分支if/else、switch等分支逻辑中72.1% 的分支路径被覆盖-Funcs函数91.5% 的函数被至少调用过一次-Lines行87.3% 的代码行被执行过重点看红色高亮的行——那是未被覆盖的代码。比如我在某次重构中发现bootstrap-datetimepicker.js第 1245 行一个else if分支始终是红色追踪发现是viewMode设置为decades时的边界逻辑没写测试用例。补上一个test(should handle decades view mode, ...)后那一行变绿整体覆盖率升到 88.1%。提示覆盖率不是越高越好而是要关注“关键路径”。比如日期解析、格式化、事件绑定这三块必须 100% 覆盖而一些边缘情况如destroy()方法被多次调用可以接受 70%。我的经验是核心功能模块覆盖率 ≥ 95%工具函数 ≥ 85%UI 渲染逻辑 ≥ 80%。5. 常见问题与排查技巧实录那些文档里不会写的“血泪教训”5.1 典型问题速查表问题现象可能原因排查步骤解决方案点击输入框无反应控制台无报错jQuery 或 moment.js 未加载打开浏览器开发者工具 → Network 标签页检查jquery.min.js、moment.min.js、bootstrap-datetimepicker.js是否 200 OK确保 script 标签顺序jQuery → moment → bootstrap-datetimepicker检查路径是否正确弹层位置错乱偏左/偏上/被遮挡Bootstrap CSS 未加载或 z-index 冲突检查 Elements 面板看.bootstrap-datetimepicker-widget元素是否有position: absolute、top/left值是否合理搜索页面中是否有其他z-index 1000的元素引入bootstrap.min.css在自定义 CSS 中添加.bootstrap-datetimepicker-widget { z-index: 1100 !important; }选择日期后输入框不更新或显示Invalid dateformat选项与 moment 解析规则不匹配在控制台执行moment(2024-03-15, YYYY-MM-DD).isValid()看是否返回true检查初始化时format字符串是否含非法 token使用 moment 官方 token 文档核对格式避免用YYYY/MM/DD这种斜杠分隔符moment 默认不识别需显式指定 parser时间滚轮无法滚动点击无响应浏览器不支持transform或transition在 IE9 下测试检查控制台是否有Object doesnt support property or method addEventListener报错为 IE9 添加es5-shim.js和es5-sham.js或降级使用bootstrap-datetimepicker v4.7.14最后一个支持 IE9 的版本中文 locale 不生效仍显示英文moment-with-locales.min.js未引入或locale选项拼写错误检查 Network 面板确认moment-with-locales.min.js已加载在控制台执行moment.locale()看返回值确保moment-with-locales.min.js在bootstrap-datetimepicker.js之前locale值必须小写且与 moment 内置 locale 名称一致如zh-cn不是zh或Chinese5.2 独家避坑技巧那些只有踩过才知道的细节技巧一禁用日期的数组写法陷阱插件支持disabledDates: [2024-03-15, 2024-03-16]但很多人不知道这个数组里的字符串必须能被 moment 正确解析。2024/03/15在某些浏览器下会解析失败。安全写法是传 moment 对象数组$(#datetimepicker1).datetimepicker({ disabledDates: [ moment(2024-03-15), moment(2024-03-16) ] });技巧二动态修改选项的正确姿势想在运行时关闭时间选择pickTime: false不能直接改配置对象必须调用方法// ❌ 错误不会生效 $(#datetimepicker1).data(DateTimePicker).options.pickTime false; // ✅ 正确调用 setOptions 方法 $(#datetimepicker1).data(DateTimePicker).setOptions({ pickTime: false });技巧三IE8 兼容性终极方案虽然官方已放弃 IE8 支持但如果你真要兼容只需三步1. 引入es5-shim.js和es5-sham.js2. 引入console-polyfill.js避免console.log报错3. 在bootstrap-datetimepicker.js开头添加if (!Array.prototype.indexOf) { Array.prototype.indexOf function(searchElement) { /* polyfill */ }; }技巧四移动端触摸体验优化在 iPhone 上时间滚轮滑动不跟手。原因是默认阻止了touchmove事件。解决方案是在初始化后手动解绑$(#datetimepicker1).datetimepicker().on(dp.show, function() { $(.timepicker-hours, .timepicker-minutes).off(touchmove); });技巧五与 Vue/React 项目共存的隔离方案如果你的项目是 Vue 2.x且用了v-model绑定输入框datetimepicker 的change事件可能触发两次。根本解法是禁用 datetimepicker 的自动更新改用手动同步var dp $(#datetimepicker1).datetimepicker({ useCurrent: false, widgetPositioning: { horizontal: auto, vertical: bottom } }); // 手动同步 Vue 数据 dp.on(dp.change, function(e) { vm.myDateTime e.date.format(YYYY-MM-DD HH:mm); // vm 是 Vue 实例 }); // Vue 数据变更时手动更新 datetimepicker vm.$watch(myDateTime, function(newVal) { if (newVal) { dp.data(DateTimePicker).date(moment(newVal)); } });6. 二次开发与定制指南从“能用”到“专属”的最后一步6.1 修改默认图标把 glyphicon 换成 Font Awesome 5资源包默认用glyphicon但你的项目可能已全面迁移到 Font Awesome 5。修改步骤如下在datetimepicker.less里找到图标变量定义通常在开头附近icon-time: ~glyphicon glyphicon-time; icon-date: ~glyphicon glyphicon-calendar; icon-up: ~glyphicon glyphicon-chevron-up; icon-down: ~glyphicon glyphicon-chevron-down;替换为 FA5 类名icon-time: ~fas fa-clock; icon-date: ~fas fa-calendar-alt; icon-up: ~fas fa-chevron-up; icon-down: ~fas fa-chevron-down;确保页面已引入 Font Awesome CSSlink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css运行grunt css重新编译。注意FA5 图标需要font-weight: 900所以你可能需要在 LESS 里追加.bootstrap-datetimepicker-widget .input-group-addon i { font-weight: 900; }6.2 增加“季度选择”视图修改源码的最小改动方案插件原生不支持季度Q1/Q2/Q3/Q4但你可以用 10 行代码扩展在bootstrap-datetimepicker.js的DatePicker.prototype.viewModes数组里插入quarterthis.viewModes [ { clsName: days, navFnc: M, navStep: 1 }, { clsName: months, navFnc: y, navStep: 1 }, { clsName: years, navFnc: y, navStep: 10 }, { clsName: decades, navFnc: y, navStep: 100 }, { clsName: quarter, navFnc: q, navStep: 1 } // 新增 ];在DatePicker.prototype.fillQuarter方法里搜索fillMonth复制一份改名写季度渲染逻辑DatePicker.prototype.fillQuarter function() { var year this.viewDate.year(); var html span classyear year /spantable classtable-condensedtheadtrth colspan4Q1-Q4/th/tr/theadtbodytr; for (var q 1; q 4; q) { html td classquarter (this.date this.date.quarter() q ? active : ) q /td; } html /tr/tbody/table; this.widget.find(.datepicker-days).html(html); };在DatePicker.prototype.clickQuarter方法里处理点击DatePicker.prototype.clickQuarter function(e) { e.preventDefault(); var quarter parseInt($(e.target).text(), 10); this.date.month((quarter - 1) * 3).date(1); this.viewMode days; this.fill(); };提示这种修改会破坏npm update的升级路径。更可持续的做法是 Fork 仓库提交 PR或维护一个 patch 文件用git apply应用。6.3 构建私有 npm 包如何发布到公司内网 registry如果你想把这个 datetimepicker 作为公司内部标准组件发布步骤如下修改package.json-name: your-company/bootstrap-datetimepicker-version: 4.17.47-company.1-publishConfig: { registry: https://npm.your-company.com/ }登录内网 registrynpm login --registry https://npm.your-company.com/发布npm publish --registry https://npm.your-company.com/项目中安装npm install your-company/bootstrap-datetimepicker这样所有团队成员npm install时都会拉取你们审核过的版本避免外部 CDN 不可用或版本漂移风险。7. 最后的实操体会为什么我坚持用这个老插件而不是拥抱新潮流上周我帮一个做医疗系统的客户做技术评估他们想把十年的老后台从 Bootstrap 3 升级到 Vue 3 Element Plus。我花了一整天把所有日期时间控件替换成el-date-picker结果发现三个致命问题第一el-date-picker的range模式在移动端无法滑动选择时间段第二它的时区处理逻辑和医院 HIS 系统的 Java 后端不兼容2024-03-15T00:00:0008:00被解析成2024-03-14T16:00:00Z第三客户要求保留“双月视图”同时显示本月和下月Element Plus 不支持得自己写组件。最后我们退回原方案在 Vue 3 项目里用v-html渲染一个 Bootstrap 3 的div.input-group然后用ref获取 DOM 元素手动调用$(ref).datetimepicker()。是的混用了 jQuery 和 Vue但它在 IE11、Chrome、Safari 上 100% 一致和十年前的业务逻辑完全兼容上线后零故障。这个 datetimepicker 的价值从来不在“新”而在“稳”。它没有炫酷的动画没有响应式网格没有 Web Component 封装但它有一份完整的 QUnit 测试、一套可追溯的 LESS 变量、六张像素级精确的截图、一个能跑通所有浏览器的 Grunt 构建链路。当你面对的是一个需要稳定运行五年的政府审批系统或者一个不允许任何线上故障的金融交易后台“能用、可控、可信”这三个词比任何技术名词都重。所以别犹豫了。把资源包解压双击index.html看着那个熟悉的日历弹出来输入框里自动填上当前时间——那一刻你就知道这不是一个过时的插件而是一把被无数人用汗水打磨过的、能打开任何 Bootstrap 3 项目大门的钥匙。本文还有配套的精品资源点击获取简介一套开箱即用的Bootstrap日期时间选择器实现支持年月日时分选择、12/24小时制切换适配Bootstrap 3项目。提供完整前端资源未压缩及压缩版JSbootstrap-datetimepicker.js/.min.js、CSS样式文件含标准版和压缩版、LESS源文件datetimepicker.less便于定制主题和二次开发。附带6张标准界面截图standard_full.png、standard_day_meridian.png等直观展示不同视图模式下的UI效果。内置QUnit测试环境包含tests.html、tests.min.html、run-qunit.js和覆盖率报告_coverage.html配合Gruntfile.js、package.、bower.实现自动化构建与依赖管理。项目结构规范含README.md、LICENSE、.gitignore等标准开源配置文件支持npm install或bower install快速集成。所有文件均已整理就绪可直接引入现有Bootstrap 3项目中使用无需额外配置即可运行示例页面。本文还有配套的精品资源点击获取
相关文章
大模型提示工程层正在归零：原生结构化输出与语义理解如何重构AI应用架构
1. 项目概述：这不是一次普通更新，而是一次架构级“蒸发”“Anthropic Just Shipped the Layer That’s Already Going to Zero”——这个标题一出来，我在 Slack 里看到好几个做 LLM 应用架构的老同事直接暂停了手头的 API 集成测试࿰…
大语言模型词元掩码策略：从随机遮盖到领域自适应的工程实践
1. 项目概述：为什么“遮住一部分词”反而让大模型更聪明？你有没有试过让一个刚学说话的孩子复述一段话，但故意把其中几个关键词捂住，让他猜？孩子往往不是卡壳，而是更专注地调动上下文、语法习惯和常识去补全…
SAP ABAP开发实战：用CAST、CONCAT和SUBSTRING搞定S/4 HANA复杂数据拼接与转换
SAP ABAP开发实战：用CAST、CONCAT和SUBSTRING搞定S/4 HANA复杂数据拼接与转换在SAP S/4HANA项目中，数据转换与拼接是每个ABAP开发者都会遇到的经典问题。想象这样一个场景：财务部门需要将物料凭证、销售订单和日期信息组合成一个20位的AWKEY字…
3秒解锁百度网盘资源：智能提取码工具如何改变你的下载体验
3秒解锁百度网盘资源：智能提取码工具如何改变你的下载体验 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 还在为每次下载百度网盘资源都要四处寻找提取码而烦恼吗？面对海量的学习资料、软件资源和媒体…
689款开源macOS应用完全指南：免费工具宝库与实用安装教程
689款开源macOS应用完全指南：免费工具宝库与实用安装教程 【免费下载链接】open-source-mac-os-apps 🚀 Awesome list of open source applications for macOS. https://t.me/s/opensourcemacosapps 项目地址: https://gitcode.com/gh_mirrors/op/open…
思源宋体TTF完全解析：专业中文排版的7大实战应用
思源宋体TTF完全解析：专业中文排版的7大实战应用 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 还在为中文设计项目寻找完美的免费字体解决方案吗？思源宋体TTF…
告别调试工具！用Python脚本模拟硬件，5分钟搞定OneNET MQTT数据上报与命令下发
用Python脚本5分钟模拟硬件接入OneNET平台全流程实战当你手头没有物联网硬件设备，却又需要快速验证OneNET平台的MQTT通信功能时，是否只能望而兴叹？本文将带你用纯Python脚本突破硬件限制，通过paho-mqtt库完整模拟设备行为。无需调…
告别Keil，拥抱免费IDE：STM32标准库工程在CubeIDE下的完整配置与调试指南
从Keil到STM32CubeIDE：标准库项目迁移的完整实践指南在嵌入式开发领域，工具链的选择直接影响着开发效率和项目维护成本。对于长期使用Keil MDK进行STM32开发的工程师来说，授权费用和跨平台限制逐渐成为痛点。STM32CubeIDE作为ST官方推出的免费…
3步掌握B站视频下载：DownKyi开源工具终极指南
3步掌握B站视频下载：DownKyi开源工具终极指南 【免费下载链接】downkyi 哔哩下载姬downkyi，哔哩哔哩网站视频下载工具，支持批量下载，支持8K、HDR、杜比视界，提供工具箱（音视频提取、去水印等）。…
LED驱动技术全解析：从核心架构到实战选型与避坑指南
1. 从一颗灯珠到千亿市场：LED驱动的技术演进与商业逻辑十几年前，当我第一次从料盘上拿起一颗0603封装的白色LED时，它微弱的光晕和高达几块钱的单颗成本，让我很难想象今天它几乎照亮了我们生活的每一个角落。从手机屏幕的一抹背光&…
索引堆及其优化
索引堆及其优化 引言 索引堆是一种数据结构，广泛应用于计算机科学和软件工程领域。它主要用于解决优先队列问题，如最小堆和最大堆。本文将详细介绍索引堆的概念、实现方法以及优化策略。 索引堆的定义 索引堆是一种基于堆数据结构的索引机制。它通过维护一个堆来存储数据…
从零到日增237精准粉丝，我靠CSDN这张AI卡片爆了！手把手复刻全流程，含配置避坑清单
更多请点击： https://intelliparadigm.com 第一章：CSDN AI 数字营销的官方引流卡片是什么功能？ CSDN AI 数字营销平台推出的「官方引流卡片」，是一种面向技术创作者的轻量级、可嵌入式内容分发组件，专为提升博文、教程…
LED驱动技术全解析：从核心架构到实战选型与避坑指南
1. 从一颗灯珠到千亿市场：LED驱动的技术演进与商业逻辑十几年前，当我第一次从料盘上拿起一颗0603封装的白色LED时，它微弱的光晕和高达几块钱的单颗成本，让我很难想象今天它几乎照亮了我们生活的每一个角落。从手机屏幕的一抹背光&…
索引堆及其优化
索引堆及其优化 引言 索引堆是一种数据结构，广泛应用于计算机科学和软件工程领域。它主要用于解决优先队列问题，如最小堆和最大堆。本文将详细介绍索引堆的概念、实现方法以及优化策略。 索引堆的定义 索引堆是一种基于堆数据结构的索引机制。它通过维护一个堆来存储数据…
从零到日增237精准粉丝，我靠CSDN这张AI卡片爆了！手把手复刻全流程，含配置避坑清单
更多请点击： https://intelliparadigm.com 第一章：CSDN AI 数字营销的官方引流卡片是什么功能？ CSDN AI 数字营销平台推出的「官方引流卡片」，是一种面向技术创作者的轻量级、可嵌入式内容分发组件，专为提升博文、教程…
Zotero Duplicates Merger：5步彻底清理文献库重复条目
Zotero Duplicates Merger：5步彻底清理文献库重复条目 【免费下载链接】ZoteroDuplicatesMerger A zotero plugin to automatically merge duplicate items 项目地址: https://gitcode.com/gh_mirrors/zo/ZoteroDuplicatesMerger 还在为文献库中堆积如山的重…
利用随机有限集理论对蜂群的ILQR和MPC控制研究附Matlab代码
✅作者简介：热爱科研的Matlab仿真开发者，擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页：Matlab科研工作室🍊个人信条：格物致知,完整Matlab代码及仿真咨询…
为什么你的Gemini邮件CTE低于行业均值2.8倍？：从Prompt架构到发送时序的深度归因
更多请点击： https://intelliparadigm.com 第一章：为什么你的Gemini邮件CTE低于行业均值2.8倍？：从Prompt架构到发送时序的深度归因 Gemini邮件的客户转化效率（CTE）显著偏低，根本原因常被误判为…