bootstrap-timepicker not working

Question

I am trying to get timepicker to work similarly to datepicker:

    <div class="form-group">
        <div class="input-group date" data-provide="datepicker">
            <input type="text" class="form-control" placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">

            <span class="input-group-addon">
                <i class="glyphicon glyphicon-th"></i>
            </span>
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <script>
        var date = new Date();
        date.setDate(date.getDate()+1);
        $('div.input-group.date').datepicker({
            startDate: date
        });
    </script>

    <div class="form-group">
        <div class="input-group bootstrap-timepicker timepicker">
            <input id="timepicker1" type="text" class="form-control input-small">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-time"></i>
            </span>
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <script type="text/javascript">
        $('#timepicker1').timepicker();
    </script>

Datepicker works, but Timepicker dos not show up when clicked. Did I do something wrong in the javascript part?

I have the feeling that #timepicker1 should be replaced with something else, similarly to the datepicker div.input-group.date — AusTex, Mar 20 '16 at 18:07
Yes:TypeError: $(...).timepicker is not a function $('#timepicker1').timepicker(); — AusTex, Mar 20 '16 at 18:13
Then you probably don't have the timepicker js file loaded correctly. — WillardSolutions, Mar 20 '16 at 18:18
Yes i was calling the wrong name (min version). Now error is not appearing anymore, and a default 1:30 PM shows up, but still not able to see anything when clicking on time button — AusTex, Mar 20 '16 at 18:21

score 1 · Accepted Answer · answered Mar 20 '16 at 18:36

In head

<link href="css/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="css/bootstrap-timepicker.min.css"  rel="stylesheet">

In body

    <div class="form-group">
        <div class="input-group date" data-provide="datepicker">
            <input type="text" class="form-control" placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">

            <span class="input-group-addon">
                <i class="glyphicon glyphicon-th"></i>
            </span>
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <script>
        var date = new Date();
        date.setDate(date.getDate()+1);
        //    $('div.input-group.date').datepicker({
        $('#caldate').datepicker({
            startDate: date
        });
    </script>

    <div class="form-group">
        <div class="input-group bootstrap-timepicker timepicker">
            <input id="timepicker1" type="text" class="form-control input-small">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-time"></i>
            </span>
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <script type="text/javascript">
        $('#timepicker1').timepicker({
            defaultTime: 'current',
            minuteStep: 1
        });
    </script>

bootstrap-timepicker not working

1 Answers1

Linked