twitter-bootstrap 引导日期选择器 index.html 的具体示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23790700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap datepicker concrete example of the index.html
提问by user3373281
I must be an idiot. I've been trying to get the bootstrap datepickerto work for hours unsuccessfully. What do I need to write in the index.html to put up a simple datepicker?
我一定是个白痴。我一直试图让引导日期选择器工作几个小时但没有成功。我需要在 index.html 中写什么来放置一个简单的日期选择器？
<html>
<head><title>A concrete example I will upload to github for future people</title>
<!-- What exactly do I need to include here? There's /js/bootstrap-datepicker.js -->
</head>
<body>
Datepicker:
<!-- The documentation says <input type="text" type="text" class="form-control"> -->
</body></html>
Steps
脚步
- Create node.js server and clone github into the 'public' folder
- cd to the datepicker folder and npm install. Make sure grunt-cli is installed.
- create index.html file with code generously provided by hero on Stack Overflow, whom we owe a tremendous thanks.
- 创建 node.js 服务器并将 github 克隆到“public”文件夹中
- cd 到 datepicker 文件夹并安装 npm。确保安装了 grunt-cli。
- 使用英雄在 Stack Overflow 上慷慨提供的代码创建 index.html 文件，我们非常感谢他。
回答by jme11
Alternatively, you could:
或者，您可以：
- Download the zip file
- Copy the bootstrap-datepicker.js and datepicker3.css files to your bootstrap project
- Link the files to your page
- Add an input and use the data attributes
<input data-provide="datepicker">or the js method to call the datepicker$('.datepicker').datepicker()
- 下载压缩文件
- 将 bootstrap-datepicker.js 和 datepicker3.css 文件复制到你的 bootstrap 项目
- 将文件链接到您的页面
- 添加输入并使用数据属性
<input data-provide="datepicker">或js方法调用datepicker$('.datepicker').datepicker()
The docs have a bunch of other details on setting up things like date ranges etc. http://bootstrap-datepicker.readthedocs.org/en/release/
文档有很多关于设置日期范围等内容的其他详细信息。http://bootstrap-datepicker.readthedocs.org/en/release/
Where are you specifically getting stuck?
你特别卡在哪里？
EDIT: it could be as basic as this:
编辑：它可能像这样基本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="plugins/bootstrap-datepicker-master/css/datepicker3.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<input data-provide="datepicker">
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="plugins/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script src="plugins/bootstrap-datepicker-master/js/bootstrap-datepicker.js"></script>
</body>
</html>
