Bootstrap DateTimePicker 项目教程
1. 项目的目录结构及介绍
bootstrap-datetimepicker/
├── build/
├── css/
├── js/
├── less/
├── samples/
│ ├── bootstrap-v2/
│ └── bootstrap-v3/
├── screenshots/
├── tests/
├── .gitattributes
├── .gitignore
├── .jshintrc
├── .npmignore
├── .travis.yml
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── minify.sh
└── package.json
- build/: 构建相关文件。
- css/: 样式文件。
- js/: JavaScript 文件。
- less/: LESS 样式文件。
- samples/: 示例代码,包含 Bootstrap v2 和 v3 的示例。
- screenshots/: 截图文件。
- tests/: 测试文件。
- .gitattributes: Git 属性配置文件。
- .gitignore: Git 忽略配置文件。
- .jshintrc: JSHint 配置文件。
- .npmignore: npm 忽略配置文件。
- .travis.yml: Travis CI 配置文件。
- Gruntfile.js: Grunt 任务配置文件。
- LICENSE: 项目许可证。
- README.md: 项目说明文档。
- bower.json: Bower 包管理配置文件。
- minify.sh: 压缩脚本。
- package.json: npm 包管理配置文件。
2. 项目的启动文件介绍
项目的启动文件主要是 js/bootstrap-datetimepicker.js
和 css/bootstrap-datetimepicker.css
。这两个文件是核心文件,包含了日期时间选择器的所有功能和样式。
引入文件
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css">
<script src="js/bootstrap-datetimepicker.js"></script>
初始化
$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii'
});
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的元数据和依赖信息。以下是一些关键字段:
{
"name": "bootstrap-datetimepicker",
"version": "1.0.0",
"description": "Both Date and Time picker widget based on twitter bootstrap",
"main": "js/bootstrap-datetimepicker.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git://github.com/smalot/bootstrap-datetimepicker.git"
},
"keywords": [
"bootstrap",
"datetimepicker"
],
"author": "Sebastien Malot",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/smalot/bootstrap-datetimepicker/issues"
},
"homepage": "https://github.com/smalot/bootstrap-datetimepicker"
}
bower.json
bower.json
文件用于 Bower 包管理。以下是一些关键字段:
{
"name": "bootstrap-datetimepicker",
"version": "1.0.0",
"description": "Both Date and Time picker widget based on twitter bootstrap",
"main": [
"js/bootstrap-datetimepicker.js",
"css/bootstrap-datetimepicker.css"
],
"keywords": [
"bootstrap",
"datetimepicker"
],
"authors": [
"Sebastien Malot"
],
"license": "Apache-2.0",
"homepage": "https://github.com/smalot/bootstrap-datetimepicker",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
Gruntfile.js
Gruntfile.js
文件用于