bootstrap uncaught typeError: $(…).timepicker is not a function

Question

I have been working on this issue for a week now, but being new to bootstrap, I am unable to find a solution.

I have a form and it works great except for when I run the function addItem();

Once I do that it will not show the date picker or time pickers. This group of items works fine:

                <div class="form-group">
                <div class="row">


                    <div id="servicetime" class="col-sm-6 col-md-6">
                        <h4>Date In</h4>
                        <div class="input-group"> 


                            <input id="date_in_1" name="date_in_1" type="text" class="date start form-control">
                            <span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>

                        </div>
                        <h4>Time In</h4>
                        <div class="input-group"> 
                            <input id="time_in_1" name="time_in_1" type="text" class="time start form-control">
                            <span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>
                        </div>  
                        <h4>Time Out</h4>
                        <div class="input-group"> 
                            <input id="time_out_1" name="time_out_1" type="text" class="time end form-control">
                            <span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>
                        </div> 

                        <div style="display:none" class="input-group"> 
                            <input id="date_out_1" name="date_out_1" type="text" class="date end form-control" readonly>
                            <span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>
                        </div>

                    </div>
                </div>
            </div>

            <script>
                // initialize input widgets first
                $('#time_in_1').timepicker({
                    'showDuration': true,
                    'timeFormat': 'g:ia',
                    'step': 15
                });

                $('#date_in_1').datepicker({
                    'format': 'm/d/yyyy',
                    'autoclose': true
                });
                $('#time_out_1').timepicker({
                    'showDuration': true,
                    'timeFormat': 'g:ia',
                    'step': 15
                });

                $('#date_out_1').datepicker({
                    'format': 'm/d/yyyy',
                    'autoclose': true
                });

                // initialize datepair
                var basicExampleEl = document.getElementById('servicetime');
                var datepair = new Datepair(basicExampleEl);



            </script>
            <div class="row">
                <div class="col-md-6">

                    <div class="form-group">
                        <label for="children_1"># of Children:</label>
                        <div class="input-group">
                            <input type="number" class="form-control" name="children_1" min="1" max="5" id="children_1" placeholder="#" required >
                            <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="itemDiv"></div>

        <div> <a class="btn btn-primary" href="javascript:addItem()"><i>Different amount of kids for different amounts of hours then add more time frames.</i></a></div>

Once I run this function I get the error above.

function addItem() 
{


    var numberOfItems = Number($('#entry_count').val()) + 1;
    $('#entry_count').val(numberOfItems);
    var sTextToAdd = '<div class="form-group"><div class="row"><div id="servicetime'+numberOfItems+'" class="col-sm-6 col-md-6"><h4>Date In</h4><div class="input-group">';
    sTextToAdd +=  '<input id="date_in_'+numberOfItems+'" name="date_in_'+numberOfItems+'" type="text" class="date start form-control">';
    sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> </div>';
    sTextToAdd += '<h4>Time In</h4> <div class="input-group">  <input id="time_in_'+numberOfItems+'" name="time_in_'+numberOfItems+'" type="text" class="time start form-control">';
    sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div>';
    sTextToAdd += '<h4>Time Out</h4><div class="input-group"><input id="time_out_'+numberOfItems+'" name="time_out_'+numberOfItems+'" type="text" class="time end form-control">';
    sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div>';
    sTextToAdd += '<div style="display:none" class="input-group"><input id="date_out_'+numberOfItems+'" name="date_out_'+numberOfItems+'" type="text" class="date end form-control" readonly>';
    sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div></div></div></div>';
    sTextToAdd += '<br />'; 
    $('#itemDiv').append(sTextToAdd);
    // initialize input widgets first
    $('#time_in_'+numberOfItems).timepicker({
        'showDuration': true,
        'timeFormat': 'g:ia',
        'step': 15
    });
    $('#date_in_'+numberOfItems).datepicker({
        'format': 'm/d/yyyy',
        'autoclose': true
    });
    $('#time_out_'+numberOfItems).timepicker({
        'showDuration': true,
        'timeFormat': 'g:ia',
        'step': 15
    });
    $('#date_out_'+numberOfItems).datepicker({
        'format': 'm/d/yyyy',
        'autoclose': true
    });
    $('#time_in_'+numberOfItems).ptTimeSelect();
      $('#time_out_'+numberOfItems).ptTimeSelect();


    var basicExampleEl = document.getElementById('servicetime_'+numberOfItems);
    var datepair = new Datepair(basicExampleEl);
}

I tried running the script for the function at the end of the page, but it can't be loaded until after the inputs are inserted. I thought about doing a for loop and adding in the function items before the script when the page loads and then use a button to display them from style="display:none;", but I feel it's sloppy.

I tried the solution listed here but that didn't work either.

Any help with this would be greatly appreciated.

Answer 1

Your bootstrap timepicker or datepicker js files should be in footer and jquery min.js in header

In header :

<script src="/js/jquery-1.11.1.min.js"></script>

In Footer:

<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-timepicker.min.js"></script>

Try doing that if it helps.