Add a utility to your UI with Bootstrap 5 Datatime Picker snippets example. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
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 
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.
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.
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.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.