Javascript 如何使用引导数据采集器_Javascript_Twitter Bootstrap_Datepicker

Javascript 如何使用引导数据采集器

javascript twitter-bootstrap

Javascript 如何使用引导数据采集器,javascript,twitter-bootstrap,datepicker,Javascript,Twitter Bootstrap,Datepicker,好的，我对使用框架和js库还不熟悉，我想为一个表单使用bootstrap和bootstrap datepicker，我不知道文件顺序是否正确，但是链接是如何设置文件的，我对javascript知之甚少，我用php编写的代码几乎都是php，但我需要这个表单这是我的引导数据采集器测试表： <!DOCTYPE html> <html> <head> <title>Testing</title> <meta charset="ut

好的，我对使用框架和js库还不熟悉，我想为一个表单使用bootstrap和bootstrap datepicker，我不知道文件顺序是否正确，但是链接是如何设置文件的，我对javascript知之甚少，我用php编写的代码几乎都是php，但我需要这个表单

这是我的引导数据采集器测试表：

 <!DOCTYPE html>
 <html>
 <head>
<title>Testing</title>
<meta charset="utf-8">

<link rel="stylesheet" href="_css/datepicker.css">
<link rel="stylesheet" href="_css/bootstrap.css">
<link rel="stylesheet" href="_css/bootstrap-responsive.css">
<script type="text/javascript" src="datepicker/bootstrap-datepicker.js"></script>
 </head>
 <body>
 <center>
      <h1>BootStrap Datepicker</h1>
  <form>
  <div class="well span12 main">
  <input type="text" id="dp1" class="span2 datepicker" placeholder="Date..."  
           name="date"> <br>
      </div>
      <input type="submit" value="Search" class="btn">
  </form>
 </center>

<!-- JAVAscript ----------------------------------------------------------------->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="_js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="_js/bootstrap.js"></script>
 </body>
 </html>


测试
引导数据采集器

我到底做错了什么？

我相信您必须在bootstrap datepicker.js之前引用bootstrap.js

您应该在

bootstrap.js

之后包含

bootstrap datepicker.js

，并且您应该将

datepicker

绑定到您的控件

$(function(){
   $('.datepicker').datepicker({
      format: 'mm-dd-yyyy'
    });
});

伙计，你可以这样使用基本的引导数据采集器：

<!DOCTYPE html>
<head runat="server">
<title>Test Zone</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Css/datepicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#pickyDate').datepicker({
            format: "dd/mm/yyyy"
        });
    });
</script>


试验区
$（文档）.ready（函数（）{
$（“#pickyDate”）.datepicker({
格式：“dd/mm/yyyy”
});
});

和体内：

<body>
<div id="testDIV">
    <div class="container">
        <div class="hero-unit">
            <input  type="text" placeholder="click to show datepicker"  id="pickyDate"/>
        </div>
    </div>
</div>

datepicker.css和bootstrap datepicker.js您可以从左侧“关于”下方的下载按钮下载。

希望这对其他人有所帮助，问候。

只需将此添加到JS文件下方即可

<script type="text/javascript">
    $(document).ready(function () {
        $('your input's id or class with # or .').datepicker({
            format: "dd/mm/yyyy"
        });
    });
</script>


$（文档）.ready（函数（）{
$（'您的输入的id或类带有#或'）.datepicker({
格式：“dd/mm/yyyy”
});
});

在使用位置相对元素包装文本框之前，无法使引导数据选择器工作，如图所示：

你的脑袋里有一个额外的

bootstrap datepicker.js

脚本标记，而且bootstrap.js应该在插件之前加载，你需要将插件初始化到你的元素中，它不会工作，因为你设置了datepicker类控件到底是什么以及如何绑定datepicker，你在这里写的代码去哪里了？它是否与html一起放入自己的脚本标记中？如果是，在html中的何处？在js包含后，在脚本标记的答案中添加示例代码。它应该可以工作，您可能需要调整datepickeris的设置。有任何方法可以通过java脚本实现这一点。。不jquery@NMathur我建议查看

document.getElementsByClassName（'datepicker'）

或

document.querySelector（'datepicker'）

。

<span style="position: relative">
 <input  type="text" placeholder="click to show datepicker"  id="pickyDate"/>
</span>