Bootstrap datepicker index.html的具体示例

时间:2014-05-21 18:06:17

标签: jquery twitter-bootstrap datepicker

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

步骤

  1. 创建node.js服务器并将github克隆到&#39; public&#39;夹
  2. cd到datepicker文件夹和npm install。确保安装了grunt-cli。
  3. 使用Stack Overflow上的英雄慷慨提供的代码创建index.html文件,我们非常感谢。

1 个答案:

答案 0 :(得分:6)

或者,您可以:

  1. 下载zip文件
  2. 将bootstrap-datepicker.js和datepicker3.css文件复制到引导程序项目
  3. 将文件链接到您的信息页
  4. 添加输入并使用数据属性<input data-provide="datepicker">或js方法调用datepicker $('.datepicker').datepicker()
  5. 文档中有很多关于设置日期范围等内容的其他详细信息。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>