CODEWITHSUNDEEP
bootstrap-4timepicker
Ian Haney
Ian Haney

Reputation: 87

add timepicker to bootstrap 4 input field form

I am stuck on how to add a timepicker to a input field on a Bootstrap 4 admin template I am using.

I did have a Jquery one integrated and that worked before using the new admin Bootstrap 4 admin template, but now it don't work and think it is conflicting with some other Bootstrap Javascript files so seeing if can use a Bootstrap 4 timepicker, but I can't get one working, has anyone got any sample coding of one working in Bootstrap 4 form please.

Upvotes: 3

Views: 36088

Answers (1)

Pal Kerecsenyi
Pal Kerecsenyi

Reputation: 567

I do not understand your question completely, but I think this is what you are looking for:

https://tempusdominus.github.io/bootstrap-4/

Tempus Dominus is a jQuery datetime-picker plugin for Bootstrap 4. It requires minimum code to set up. After importing the library, all you have to write is:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker3" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker3"/>
                    <div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'LT'
                });
            });
        </script>
    </div>
</div>

See their documentation for more information. Hope this helps.

Upvotes: 6

Related Questions