Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap datetime picker in Modal mode not appearing

I am trying to implement a datetime picker of bootstrap in modal view such as this screenshot below:

enter image description here

My code is as follows:

HTML:

<div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="H3">Add New Overtime</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <div class='input-group date' id='ot_date'>
                                    <input type='text' class="form-control datepicker" placeholder="Enter OT Date" />
                                    <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class='input-group date' id='ot_timein'>
                                    <input type='text' class="form-control" placeholder="Enter OT Time-in"/>
                                    <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class='input-group date' id='ot_timeout'>
                                    <input type='text' class="form-control" placeholder="Enter OT Time-out" />
                                    <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" class="btn btn-primary">
                                Save
                            </button>
                        </div>

                    </div>

JS:

<script type="text/javascript">
$(document).ready(function() {
    $('#ot_date').datetimepicker();

    $('#ot_timein').datetimepicker({
        language: 'en',
        pick12HourFormat: true
    });

    $('#ot_timeout').datetimepicker({
        language: 'en',
        pick12HourFormat: true
    });
});

I have checked the following links but still no definite answer.

Query1 – DateTime picker in bootstrap is not working

Query 2 – Twitter bootstrap datetime-picker not showing properly in modal

Query 3 – Bootstrap datetime-picker showing in modal as partial

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    First of all, thanks a lot to @Guruprasad Rao for giving me an idea whats missing in my code. There I found in the console that Moment.js is needed first before calling the bootstrap-datetimepicker.js. So you can download the Moment.js from here.

    In my code, I implemented, as follows:

    <script src="<?php echo base_url(); ?>assets/bootstrap/plugins/datetimepicker/js/moment.js"></script>
<script src="<?php echo base_url(); ?>assets/bootstrap/plugins/datetimepicker/js/bootstrap-datetimepicker.js"></script>

    REMINDER: Moment.js MUST be called first before datetimepicker.js

    Secondly, thanks a lot to @Melvas. I salute you men. Thanks for correcting my code. As you said, the ID="ot_date" is added in the input element NOT in the DIV. Great mind...

    So implementing the two changes I mentioned above, I got this screenshot below. The calendar now works as expected. enter image description here


  2. 0

    You want initialize picker for this element: $(‘#ot_date‘).datetimepicker().
    But it is a ‘div’ element, not input. Try to change your HTML as:

     <div class="form-group">
    <div class='input-group date'>
        <input type='text' class="form-control datepicker" id="ot_date" placeholder="Enter OT Date" />
        <span class="input-group-addon"> 
           <span class="glyphicon glyphicon-calendar"></span> 
        </span>
     </div>
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search