如何使用引导日期选择器

Posted

技术标签:

【中文标题】如何使用引导日期选择器【英文标题】:How to use bootstrap datepicker 【发布时间】:2013-09-02 09:45:12 【问题描述】:

好的,所以我是使用框架和 js 库的新手,我希望我们引导和引导日期选择器作为表单,我不知道我的文件顺序是否正确,但链接是文件的方式设置,我对 javascript 知之甚少,几乎我所有的代码都是 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 应该在插件之前加载,你需要初始化插件到你的元素,它不会工作,因为你设置日期选择器类 【参考方案1】:

您应该在bootstrap.js 之后包含bootstrap-datepicker.js,并且应该将datepicker 绑定到您的控件。

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

【讨论】:

控件到底是什么,如何绑定日期选择器,以及您在此处编写的代码在哪里?它是否与 html 一起放入自己的脚本标签中,如果是,则在 html 中的哪个位置? 在您的 js 包含后,将示例代码添加到您的脚本标签的答案中。它应该可以工作,您可能需要调整 datepicker 的设置 有什么方法可以通过java-script .. no jquery实现这个 @NMathur 我建议查看document.getElementsByClassName('datepicker')document.querySelector('.datepicker')【参考方案2】:

你可以通过这种方式使用基本的 Bootstrap Datepicker:

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

和身体内部:

<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.cssbootstrap-datepicker.js 您可以从左侧“关于”下方的“下载”按钮上的here 下载。 希望这对某人有所帮助,问候。

【讨论】:

【参考方案3】:

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

【讨论】:

【参考方案4】:

只需在 JS 文件下面添加这个

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

【讨论】:

【参考方案5】:

在我用位置相关元素包装文本框之前无法让引导日期选择器工作,如图所示 here:

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

【讨论】:

以上是关于如何使用引导日期选择器的主要内容,如果未能解决你的问题,请参考以下文章

如何在引导日期选择器中突出显示特定日期?

如何使用引导模式更新引导日期时间选择器中的默认日期

如何使用 jQuery 日期选择器优化引导输入标签

如何动态生成日期选择器引导日期禁用

如何设置指定的日期引导日期选择器?

如何修复引导日期选择器