errors.ts:108 Uncaught Error: TD: No element was provided on Stackblitz example code

elb98rm commented 7 months ago

Prerequisites

[X] I have searched for duplicate or closed issues.
[X] I have validated my setup against the latest version on StackBlitz.
[X] I have read the contributing guidelines.
[X] I understand that only sponsored issues will be worked on and that if I wish to sponsor an issue, I will contact the owner FIRST.

Describe the issue

I have looked at stackblitz for an example of code (see link). I have then used this to create the simplest version I could for debugging. This gives the error:

errors.ts:110 Uncaught Error: TD: No element was provided. at ErrorMessages.mustProvideElement (errors.ts:108:19) at new TempusDominus (tempus-dominus.ts:55:31) at test.html:32:34

The following is a direct copy - the only difference is that index.js is added to header as inline script.

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>

    <!-- Bootstrap is not required for the picker to work-->
    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
        crossorigin="anonymous"
    ></script>

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
    />
    <!-- end bootstrap-->

    <!-- Font awesome is not required provided you change the icon options -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/solid.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/fontawesome.min.js"></script>
    <!-- end FA -->

    <script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.16/dist/js/tempus-dominus.js"></script>

    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.16/dist/css/tempus-dominus.css"
    />

    <script>
        //using "window" is just for the stackblitz, you do not need to do this
        window.datetimepicker1 = new tempusDominus.TempusDominus(
            document.getElementById('datetimepicker1'),
            {
                //put your config here
            }
        );

        document.getElementById(
            'info'
        ).innerHTML = `Your browser's locale is ${navigator.language}.<br/>
You are using version ${tempusDominus.version}`;
    </script>
</head>

<body>
<div class="container">
    <div class="alert alert-info" id="info"></div>
    <div class="row">
        <div class="col-sm-6">
            <label for="datetimepicker1Input" class="form-label"
            >Simple picker</label
            >
            <div
                class="input-group"
                id="datetimepicker1"
                data-td-target-input="nearest"
                data-td-target-toggle="nearest"
            >
                <input
                    id="datetimepicker1Input"
                    type="text"
                    class="form-control"
                    data-td-target="#datetimepicker1"
                />
                <span
                    class="input-group-text"
                    data-td-target="#datetimepicker1"
                    data-td-toggle="datetimepicker"
                >
              <span class="fa-solid fa-calendar"></span>
            </span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

StackBlitz fork

https://stackblitz.com/edit/tempus-dominus-v6-simple-setup

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of are you using? You can find this information from the sample StackBlitz.

v6.7.16

What your browser's locale? You can find this information from the sample StackBlitz.

en-GB

elb98rm commented 7 months ago

After some investigation:

This appears to be cause by the DOM not being ready. I'd suggest you mention in the documentation that the calls be placed "last" in the load, for example, after the body.

Note that the jQuery $(document).ready() fixes this.

Eonasdan commented 7 months ago

The SB worked for me. I also noticed that the sample was a bit behind. 6.9.5 is the latest version.

Glad you got it working.

elb98rm commented 7 months ago

Thanks for your attention: the point I was making was that the SB did work, the raw HTML did not... because of the loading I mentioned. You may want to note that in the docs!

Eonasdan / tempus-dominus