如何在不點擊輸入文件的情況下製作Bootstrap日曆，此日曆將在呈現任何HTML頁面時查看

Question

我想在html頁面中顯示日曆視圖，但我不知道如何執行此操作。
實際上，在我的大學項目中，我必須在頁面中集成自舉日曆，其中第一部分是日曆，其他兩部分將是交易詳情。我做了另外兩個部分。但是我不知道如何創建日曆而不點擊輸入字段。我只會用日期形象化一個日曆。
我該如何解決這個問題？

我的代碼如下：/index.html

<section id="1"> 
<div class="form-group all-forms"> 
    <div class="col-sm-3 col-sm-offset-5 r-view"> 
     <!-- Bootstrap calendar --> 
    </div> 
</div> 
</section> 

<section id="2"> 
<div class="col-md-12"> 
    <div class="mstep"> 
     <a href=""><img src="modules/core/assets/xplo-theme/booking/mstep2.png" class="img-responsive"></a> 
     <h6>Pricing Details</h6> 
    </div> 
    <a href=""><img src="modules/core/assets/xplo-theme/booking/money.png" class="img-responsive"></a><span id="go-book">How many Guests are going?</span> 
    <table class="table table1"> 
     <thead id="thead-color"> 
     <tr> 
      <th>Booking Option</th> 
      <th class="td-seat">Price</th> 
      <th class="td-seat">Adult</th> 
      <th class="td-seat">Children</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td class="td-date td-magic"> 
       <label for="1"></label> <span id="entry">Tour Price</span> 
      </td> 
      <td class="td-seat td-magic-price"><i class="fa fa-inr"></i></td> 
      <td class="td-seat td-magic"> 
       <div class="form-group"> 
        <select class="form-control adult-count"> 
         <option value="0">0</option> 
         <option value="1">1</option> 
         <option value="2">2</option> 
         <option value="3">3</option> 
         <option value="4">4</option> 
         <option value="5">5</option> 
         <option value="6">6</option> 
         <option value="7">7</option> 
         <option value="8">8</option> 
         <option value="9">9</option> 
        </select> 
       </div> 
      </td> 
      <td class="td-seat td-magic"> 
       <div class="form-group"> 
        <select class="form-control child-count"> 
         <option value="0">0</option> 
         <option value="1">1</option> 
         <option value="2">2</option> 
         <option value="3">3</option> 
         <option value="4">4</option> 
         <option value="5">5</option> 
         <option value="6">6</option> 
         <option value="7">7</option> 
         <option value="8">8</option> 
         <option value="9">9</option> 
        </select> 
       </div> 
      </td> 

     </tr> 
     <tr id="sub-total"> 
      <td class="pay">You will pay</td> 
      <td class="sub-rs"><i class="fa fa-inr"></i> <span></span></td> 
     </tr> 
     </tbody> 
    </table> 
</div> 
</section>  

<section id="3"> 
<div class="col-md-12 text-center payu-form"> 
    <form method="post" id="payu-payment-form" action="https://test.payu.in/_payment"> 
     <input type="hidden" name="key" value="gtKFFx"/> 
     <input type="hidden" name="txnid" value=""/> 
     <input type="hidden" name="amount" value=""/> 
     <input type="hidden" name="productinfo" value="Product 1"/> 
     <input type="hidden" name="firstname" value="Amit"/> 
     <input type="hidden" name="email" value="abc@gmail.com"/> 
     <input type="hidden" name="phone" value="123423233"/> 
     <input type="hidden" name="surl" value="http://localhost:8000/success"/> 
     <input type="hidden" name="furl" value="http://localhost:8000/fail"/> 
     <input type="hidden" name="hash" value=""/> 
     <button class="btn btn-success sr-only" type="submit" formtarget="_blank" >Pay by PayUmoney </button> 
     <a class="pay-by-payu" href=""><img src="/modules/core/assets/xplo-theme/booking/payumoney-logo.png" alt=""></a> 
    </form> 
</div> 
</section>   

Answer 1

檢查這些文件，以Bootstrap 3 Datepicker。

如果我理解正確，你想要一個內聯datetimepicker。

試試這個代碼：

<div id="datetimepicker"></div> 
<script type="text/javascript"> 
     $(function() { 
      $('#datetimepicker').datetimepicker({ 
       inline: true, 
       sideBySide: true 
      }); 
     }); 
</script> 

Answer 2

如果你只需要與日期的日曆：

<!-- Ignore these prerequisites if you have already included them in your project --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> 
 

 
<div class="input-group date" id="datePicker"> 
 
    <input type="text" class="form-control" placeholder="YYYY/MM/DD"/> 
 
    <span class="input-group-addon"> 
 
     <span class="glyphicon glyphicon-calendar"></span> 
 
    </span> 
 
</div> 
 

 
<script type="text/javascript"> 
 
    $(function() { 
 
     $("#datePicker").datepicker({ 
 
      // Here you can add any additional parameters 
 
      format: "yyyy/mm/dd" 
 
     }); 
 
    }); 
 
</script>

如果需要使用日期和時間您可以將日曆用

替換 bootstrap-datepicker.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script> 

，改變datepicker()到datetimepicker()