如何使用引導程序日期選擇器

Question

好的，所以我是使用框架和 js 庫的新手，我想為表單使用 bootstrap 和 bootstrap datepicker，我不知道我的文件順序是否正確，但鏈接是文件的設置方式，以及我對 javascript 知之甚少，幾乎所有我用的代碼都是 php，但我需要這個作為表單。

這是我的 bootstrap datepicker 測試表單：

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

我到底做錯了什么？

Answer 1

您應該在bootstrap.js之后包含bootstrap-datepicker.js ，並且應該將datepicker綁定到您的控件。

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

Answer 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.css和bootstrap-datepicker.js你可以從這里下載左側“關於”下方的下載按鈕。 希望這對某人有幫助，問候。

Answer 3

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

Answer 4

只需在 JS 文件下面添加這個

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

Answer 5

直到我換用相對位置元素的文本無法獲取引導日期選擇器工作如圖所示在這里：

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

如何使用引導程序日期選擇器

問題描述

5 個解決方案

解決方案1
37 已采納 2013-08-29 19:50:04

解決方案2
3 2016-06-27 13:47:36

解決方案3
2 2013-08-29 19:49:34

解決方案4
0 2019-03-31 10:24:55

解決方案5
0 2020-06-01 15:32:55

如何使用引導程序日期選擇器

問題描述

5 個解決方案

解決方案1 37 已采納 2013-08-29 19:50:04

解決方案2 3 2016-06-27 13:47:36

解決方案3 2 2013-08-29 19:49:34

解決方案4 0 2019-03-31 10:24:55

解決方案5 0 2020-06-01 15:32:55

解決方案1
37 已采納 2013-08-29 19:50:04

解決方案2
3 2016-06-27 13:47:36

解決方案3
2 2013-08-29 19:49:34

解決方案4
0 2019-03-31 10:24:55

解決方案5
0 2020-06-01 15:32:55