Как добавить datepicker на страницу начальной загрузки?

Я работаю над всплывающим календарем, но он не работает, как я ожидал.
Мне нужна помощь, чтобы добавить код datetimepicker для начальной загрузки.Как добавить datepicker на страницу начальной загрузки?

Следующий код содержит простой 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

Вы проверили .. все файлы необходимых загружены с помощью Firebug? – 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

Как добавить datepicker на страницу начальной загрузки?

ответ

Смежные вопросы