From .asp:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

How can I add a date and time picker on this popup block?

From http://www.w3schools./bootstrap/bootstrap_modal.asp:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

How can I add a date and time picker on this popup block?

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Dec 19, 2015 at 18:54 adrianbanks 83.1k2323 gold badges178178 silver badges208208 bronze badges asked Dec 19, 2015 at 18:47 Rahul PrajapatiRahul Prajapati 44611 gold badge44 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

<div class="input-append date form_datetime">

    <input size="16" type="text" value="" readonly>
    <span class="add-on"><i class="icon-th"></i></span>


</div>


<script type="text/javascript">

    $(".form_datetime").datetimepicker({

        format: "dd MM yyyy - hh:ii"
    });

</script> 

Here is the demo http://www.malot.fr/bootstrap-datetimepicker/demo.php

1. Above link throw download demo zip
2. Extract zip file
3. check demo in Extracted zip
4. use in your web
5. remove unnecessary jQuery / CSS / Javascript which conflict with your web CSS / Javascript / jQuery

In the body of the modal add the html for the input field and calendar icon like this:

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

In your main.js file, master page, or even at page level, make the javascript call like this:

$('.datepicker').datepicker({
  format: 'mm/dd/yyyy',
  startDate: '-3d'
})

there are obviously other options to control your functionality and display including ranges. Read through the documentation to explore more options bootstrap-datepicker

And be sure you have JQuery.js, Bootstrap.js, and bootstrap-datepicker.js in that order being referenced in your page's head or bottom before closing your

Here is a demo.