TempusDominus DateTimepicker for Bootstrap 4

Javascript & Ajax
#1

I have tried using the new (non-Jquery) version, but just can’t get it work, so have tried using the Bootstrap4 version.(which is no longer supported)

Below is the basic markup for a PHP form I intend to use. I need both a datetimepicker and a datepicker, and basically it works, using code taken from the TD BS4 website, and .a couple of other sites I found online.

However in my sample:

  • The heading and calendar/time icons iare left aligned, as opposed to aligned centrally, within the widget.
  • In all samples when the cursor is hovered over a disabled date, the fontawesome fa-ban icon displays, but not on my program.
  • The non-disabled dates are not highlighted as the cursor passes over them, and I can’t seem to get the current date highlighted.

Can anyone explain why this is happening, but is ok on any examples I connext to?

HTML HEAD

    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.38.0/css/tempusdominus-bootstrap-4.min.css">

HTML BODY

    <br />
    <div class = "col-md-12 well">
        <div class = "col-md-8 offset-md-2 alert alert-light" >
            <form class="form-horizontal" method = "POST" action="#">
                <div class="form-group sm row alert alert-success col-md-12">
                    <!-- Date/Time -->
                    <label class="control-label col-md-1" for="datetimepicker1inp">Date/Time:</label>  
                    <div class="col-md-4">

                        <div class="form-group">
                            <div class="input-group date" id="datetimepicker1" data-target-input="nearest" align="center">
                                <input type="text" id="datetimepicker1inp" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
                                <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- Date only -->
                    <div class="col-md-1"></div>
                    <label class="control-label col-md-1" for="datetimepicker4inp">Date:</label>  
                    <div class="col-md-4">
                        <div class="form-group">
                            <div class="input-group date" id="datetimepicker4" data-target-input="nearest">
                                <input type="text" id="datetimepicker4inp" class="form-control datetimepicker-input" data-target="#datetimepicker4"/>
                                <div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin = "anonymous" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/js/bootstrap.min.js"  crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" crossorigin = "anonymous" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker({
                daysOfWeekDisabled: [0, 2, 4],
                format: "DD/MM/YYYY HH:mm",
                stepping: 5,
                sideBySide: false

            });
        });
        $(function () {
            $('#datetimepicker4').datetimepicker({
                format: 'DD/MM/YYYY',
                daysOfWeekDisabled: [0, 2, 4]
            });
        });
    </script>

Many thanks

#2

The TempusDominus DateTimepicker is a JS library. JS and JQuery are basically the same type of library. Did you look at the simple examples on their site: TempusDominus Examples Click on the < / > to view the code example. It is simple to use.

I do not know what TD-BS4 webite. The one I posted will go over it all for you. If you still can not sort it out, show us your code again.

#3

Thanks for replying.

The code between the 2`div class="col-md-4"s and their closing /divs were copied from samples on the TempusDominus Bootstrap4 Github site, as was the basic javascript.

I have tried copying the various code examples from the site you linked to (for the latest version 6 which does not use Jquery or moment.js, but I can never get it to do anything other than display the basic input box with icon, no popup - unlike the demos, which look great, which is why I reverted to the previous version.

Still trying the version 6

#4

Hi,
I changed to a forked version (pingcheng/bootstrap4-datetimepicker) and that works perfectly, so have decided to stick with that.

#5

Great! If it works, don’t fix it. Ha! Glad you solved it!

2 Likes
Sponsor our Newsletter | Privacy Policy | Terms of Service