Bootstrap 5 Datatime Picker snippets example

Utilities Bootstrap 5Free+ CSS

Add a utility to your UI with Bootstrap 5 Datatime Picker snippets example. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

4.6k views93 downloads6 years ago

gosnippets.com/preview/bootstrap-5-datatime-picker-snippets-example

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

More Utilities snippets

Auto move mouse cursor snippet

Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.

UtilitiesView →

Bootstrap 5 Ecommerce Product Detail Page Design snippet

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Bootstrap 5 Ecommerce single product page design template

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Comments(0)

No comments yet — be the first to start the discussion.

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