Comment puis-je faire Bootstrap calendrier sans cliquer sur le fichier d'entrée, ce calendrier affichera lors du rendu de toute page HTML

Question

Je veux afficher une vue du calendrier dans une page HTML, mais je ne sais pas comment faire celui-ci.
En fait, dans mon projet de collège, je dois intégrer un calendrier bootstrap dans une page, où dans cette page la première section sera un calendrier et deux autres sections seront des détails de transaction. J'ai fait les deux autres sections. Mais je ne sais pas comment créer un calendrier sans cliquer sur le champ de saisie. Je vais juste visualiser un calendrier avec la date.
Comment puis-je résoudre ce problème?

Mon code est ci-dessous: /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

Vérifiez cette documentation pour Bootstrap 3 Datepicker.

Si j'ai bien compris, vous voulez un datetimepicker en ligne.

Essayez ce code:

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

Answer 2

Si vous avez besoin d'un calendrier uniquement avec la date:

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

Si vous avez besoin d'un calendrier à la fois la date et l'heure, vous pouvez remplacer bootstrap-datepicker.js avec

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

et changer le datepicker() à datetimepicker()