Bootstrap datepicker index.html的具体例子答案

【问题标题】：Bootstrap datepicker concrete example of the index.htmlBootstrap datepicker index.html的具体例子
【发布时间】：2014-05-21 18:06:17
【问题描述】：

我一定是个白痴。我一直试图让bootstrap 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>

步骤

创建 node.js 服务器并将 github 克隆到“public”文件夹中
cd 到 datepicker 文件夹和 npm install。确保已安装 grunt-cli。
使用 Stack Overflow 上 hero 慷慨提供的代码创建 index.html 文件，我们非常感谢他。

【问题讨论】：

标签： jquery twitter-bootstrap datepicker

【解决方案1】：

或者，您可以：

下载压缩包
将 bootstrap-datepicker.js 和 datepicker3.css 文件复制到您的引导项目中
将文件链接到您的页面
添加输入，使用数据属性<input data-provide="datepicker">或者js方法调用日期选择器$('.datepicker').datepicker()

文档有很多关于设置日期范围等的其他细节。http://bootstrap-datepicker.readthedocs.org/en/release/

你特别卡在哪里？

编辑：它可以像这样基本：

<!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>

【讨论】：