Bootstrap 5 Datatime Picker snippets example

Loading…

Bootstrap 5 Datatime Picker snippets example | GoSnippets

Source Code

1 
2 
3  <div class="container py-5">
4    <h4 class="text-center">Bootstrap 4 Datetime Picker</h4><br/>
5    <div class="row">
6        <div class="col-sm-6 mx-auto">
7            <div class="mb-3">
8                <div class="input-group input-group-lg date" id="datetimepicker1" data-target-input="nearest">
9                    <input type="text" class="form-control datetimepicker-input" data-bs-target="#datetimepicker1">
10                    <div class="" data-bs-target="#datetimepicker1" data-bs-toggle="datetimepicker">
11                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
12                    </div>
13                </div>
14            </div>
15        </div>
16    </div>
17</div>
18 
19  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
20
21  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
22
23  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
24
25  <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js"></script>
26
27  <script>
28  $(function () { 
29    $('#datetimepicker1').datetimepicker({useCurrent:false})
30     
31    $("#datetimepicker1").on("change.datetimepicker", function (e) {
32        if (e.oldDate !== e.date) {
33            alert('You picked: ' + new Date(e.date).toLocaleDateString('en-US'))
34        }
35    })
36})
37  </script> 
38

Bootstrap 5 Datatime Picker snippets example

Source Code

More Utilities snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery