javascriptjqueryjquery-uijquery-ui-datepickerjquerydatetimepicker

Jquery UI Datepicker Timepicker sliders not working when dragging


I am using a Jquery UI Datepicker with Timepicker addon to select a date with custom time. When trying to drag the slider and change the time, it will display this error:

jquery-ui.min.js:23 Uncaught TypeError: Cannot read property 'length' of undefined
at b.<computed>.<computed>._trigger (jquery-ui.min.js:23)
at b.<computed>.<computed>._start (jquery-ui.min.js:376)
at b.<computed>.<computed>._mouseCapture (jquery-ui.min.js:372)
at b.<computed>.<computed>._mouseDown (jquery-ui.min.js:25)
at HTMLDivElement.<anonymous> (jquery-ui.min.js:24)
at HTMLDivElement.dispatch (jquery-3.4.1.js:5237)
at HTMLDivElement.elemData.handle (jquery-3.4.1.js:5044)

I have tried with several different versions of jQuery-UI, jQuery,jQuery-migrate and so on. The error still exists and I am including the corresponding libraries only once.

Here is my footer file to include JavaScript:

<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery- 
ui.min.js"></script>

<script src="./js/jquery-ui-timepicker.js"></script>
<script src="js/store.js"></script>

</body>
</html>

And for the header file I am including the jQuery 3.4.1 since I use jQuery script before closing of the body tag (to print out table with certain data).

I have checked from the Sources of DOM that I include only once the libraries.

This is the link https://trentrichardson.com/examples/timepicker/ I gathered the codes from.


Solution

  • Solved this issue by disabling jquery-migrate 1.2.1 and I had old jquery-ui version of 1.08.x coming from the CDN and changed that to 1.12.1 and now the error disappeared and the sliders will actually work!