Bootstrap 4 日期时间选择器实用指南

核心功能解析

模块化架构与文件关联

Bootstrap 4 日期时间选择器采用分层设计，各目录文件协同工作实现完整功能：

• src/sass/ 📁：样式源代码目录，包含 _tempusdominus-bootstrap-4.scss 核心样式文件，通过变量定义和混合器实现主题定制
• src/js/ 📁：JavaScript 逻辑层，tempusdominus-bootstrap-4.js 实现日期时间选择的交互逻辑
• docs/ 📁：文档与示例集合，包含使用指南和交互演示
• tasks/ 📁：构建工具脚本，如 bump_version.js 用于版本管理

常见问题速解：

• Q: 修改 SCSS 文件后未生效？
  A: 需重新编译样式文件，可通过 npm run build 执行构建流程
• Q: 找不到文档中的示例代码？
  A: 检查 docs/Usage/index.html 文件，包含完整交互示例

核心技术栈解析

本项目基于三大技术支柱构建：

1. Sass 🔧：用于样式预编译，支持变量、嵌套规则和模块化组织
2. JavaScript (ES6+) ⚙️：实现交互逻辑，依赖 jQuery 处理 DOM 操作
3. Bootstrap 4 🎨：提供基础 UI 组件和响应式布局系统

常见问题速解：

• Q: 必须使用 jQuery 吗？
  A: 是的，核心交互逻辑依赖 jQuery 1.9.1+ 版本
• Q: 支持哪些浏览器？
  A: 兼容 Chrome 45+、Firefox 38+、Edge 12+ 和 Safari 8+

快速上手流程

环境搭建（约5分钟）

目标：在本地环境部署可运行的开发版本
操作：

1. 克隆仓库

   git clone https://gitcode.com/gh_mirrors/bo/bootstrap-4
   

2. 安装依赖

   cd bootstrap-4 && npm install
   

3. 构建项目

   npm run build
   

结果：在项目根目录生成编译后的 CSS 和 JS 文件

常见问题速解：

• Q: npm install 失败？
  A: 确保 Node.js 版本 ≥ 8.0.0，推荐使用 nvm 管理 Node 版本
• Q: 构建后没有生成文件？
  A: 检查 Gruntfile.js 配置是否正确，尝试删除 node_modules 后重新安装

开发服务器对比与选择（约3分钟）

目标：选择适合开发需求的本地服务器方案

方案	安装命令	启动命令	适用场景	特点
live-server	npm install -g live-server	live-server docs/	快速预览	零配置，自动刷新
webpack-dev-server	npm install --save-dev webpack-dev-server	npx webpack-dev-server	复杂项目	支持热模块替换，需配置 webpack

操作建议：简单预览选择 live-server，开发自定义组件选择 webpack-dev-server

常见问题速解：

• Q: live-server 无法自动刷新？
  A: 检查文件是否在 docs 目录下，确保没有权限问题
• Q: webpack 启动报端口占用？
  A: 修改配置文件中的 port 选项，如 "port": 8081

深度定制指南

样式变量定制（约10分钟）

目标：通过修改 Sass 变量实现主题颜色定制
操作：

1. 打开 src/sass/_tempusdominus-bootstrap-4.scss
2. 修改主色调变量

   $primary-color: #2c3e50; // 原默认值 #007bff
   

3. 重新编译

   npm run build-css
   

结果：日期选择器主题色变为深灰色，所有关联组件自动应用新样式

修改效果对比：

• 修改前：蓝色主题 (#007bff)
• 修改后：深灰主题 (#2c3e50)

常见问题速解：

• Q: 修改变量后样式无变化？
  A: 确认变量名是否正确，Sass 变量区分大小写
• Q: 编译后出现样式冲突？
  A: 使用更具体的选择器或增加 !important 标记（谨慎使用）

功能扩展开发（约15分钟）

目标：添加自定义日期格式化功能
操作：

1. 打开 src/js/tempusdominus-bootstrap-4.js
2. 添加格式化函数

   // 新增日期格式化方法
   function formatYYYYMMDD(date) {
     return date.getFullYear() + '-' + 
            (date.getMonth()+1).toString().padStart(2, '0') + '-' +
            date.getDate().toString().padStart(2, '0');
   }
   

3. 在初始化配置中使用

   $('#datetimepicker').datetimepicker({
     format: formatYYYYMMDD
   });
   

结果：日期选择器输出格式变为 YYYY-MM-DD 形式

常见问题速解：

• Q: 函数不生效？
  A: 检查是否在 DOM 加载完成后执行初始化代码
• Q: 日期格式错误？
  A: 确保 padStart 方法兼容性，旧浏览器可能需要 polyfill

构建流程优化（约8分钟）

目标：自定义构建命令，只编译修改的文件
操作：

1. 编辑 package.json，添加增量构建脚本

   "scripts": {
     "build-dev": "grunt watch"
   }
   

2. 启动监听模式

   npm run build-dev
   

结果：修改文件后自动触发增量编译，平均节省 60% 构建时间

常见问题速解：

• Q: watch 模式不触发？
  A: 检查 Gruntfile.js 中的 watch 配置是否包含目标文件
• Q: 增量构建仍很慢？
  A: 尝试增加内存限制 node --max-old-space-size=4096 node_modules/grunt-cli/bin/grunt