如何将日期选择器添加到引导页面？

我在弹出的日历上工作，但它不像我预期的那样工作。
我需要一些帮助来为bootstrap添加datetimepicker代码。如何将日期选择器添加到引导页面？

以下代码包含一个简单的Hello World以及datetimepicker文本框，但不包含选择器。

<html lang="en"> 
    <head> 
     <title>Bootstrap Example</title>`enter code here` 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link href="css/one-page-wonder.css" rel="stylesheet"> 
     <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
     <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> 
     <script src="js/bootstrap.min.js"></script> 
    </head> 
    <body> 

     <div class="container-fluid"> 
      <h1>My First Bootstrap Page</h1> 
      <p>Hello World</p> 
     </div> 

     <div class="form-group"> 
      <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label> 
      <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"> 
       <input class="form-control" size="16" type="text" value="" readonly> 
       <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> 
       <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> 
      </div> 
      <input type="hidden" id="dtp_input1" value="" /><br/> 
     </div> 

     <script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script> 
     <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> 
     <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script> 
     <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script> 

     <script type="text/javascript"> 

      $('.form_datetime').datetimepicker({ 
       //language: 'fr', 
       weekStart: 1, 
       todayBtn: 1, 
       autoclose: 1, 
       todayHighlight: 1, 
       startView: 2, 
       forceParse: 0, 
       showMeridian: 1 
      }); 

      $('.form_date').datetimepicker({ 
       language: 'fr', 
       weekStart: 1, 
       todayBtn: 1, 
       autoclose: 1, 
       todayHighlight: 1, 
       startView: 2, 
       minView: 2, 
       forceParse: 0 
      }); 

      $('.form_time').datetimepicker({ 
       language: 'fr', 
       weekStart: 1, 
       todayBtn: 1, 
       autoclose: 1, 
       todayHighlight: 1, 
       startView: 1, 
       minView: 0, 
       maxView: 1, 
       forceParse: 0 
      }); 

     </script> 

    </body> 
</html>

来源

2016-09-30 G.I.Joe

你检查..所有neccessary文件通过萤火虫正确加载？ – Vikrant

你有什么样的css和js文件夹？检查控制台并确保一切正常加载。 – Sasith

我使用bootstrap-datepicker 库进行引导。请检查下面的源代码。这很简单。

你只需要确保你已经添加了所需的库和正确的顺序。您不需要为此拥有本地库，您可以使用任何CDN提供程序，例如我正在使用cdnjs。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="input-group date" data-provide="datepicker"> 
 
    <input type="text" class="form-control"> 
 
    <div class="input-group-addon"> 
 
     <span class="glyphicon glyphicon-th"></span> 
 
    </div> 
 
</div>

来源

2016-09-30 08:07:42 WitVault

如何将日期选择器添加到引导页面？

回答

相关问题