Uncaught TypeError: $(...).tempusDominus is not a function

Question

   <!-- Vendor JS Files -->
  <script src="../assets/vendor/jquery/jquery-3.6.0.js"></script>
  <script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../assets/vendor/datatables/datatables.js"></script>
  <script src="../assets/vendor/apexcharts/apexcharts.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="../assets/vendor/chart.js/chart.min.js"></script>
  <script src="../assets/vendor/echarts/echarts.min.js"></script>
  <script src="../assets/vendor/quill/quill.min.js"></script>
  <script src="../assets/vendor/simple-datatables/simple-datatables.js"></script>
  <script src="../assets/vendor/tinymce/tinymce.min.js"></script>
  <script src="../assets/vendor/php-email-form/validate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tempus-dominus/6.0.0-beta2/js/tempus-dominus.js"></script>
  <script src="https://kit.fontawesome.com/a98bc9d553.js" crossorigin="anonymous"></script>

  <!-- Template Main JS File -->
  <script src="../assets/js/main.js"></script>

What's wrong with my script init? already tried, it always give me Uncaught TypeError: $(...).tempusDominus is not a function eventhough the Jquery already at the top

Are you loading another version of jQuery.js between the batch of ` — Rory McCrossan, Mar 14 '22 at 10:45
It was just my website script that doesn't affect anything yet — AZIS SOFYAN PRASETYO, Mar 14 '22 at 10:58
Some frameworks put additional scripts at the end of the page - if your code is in doc.ready, then it may be that a different jquery loads (and removes your datepicker) before your code *runs*, regardless of the order in the code. *Just* before your line with the error, add: `console.log(jQuery.fn.jquery)` and let us know the result. — freedomn-m, Mar 14 '22 at 11:00
Quick look at https://getdatepicker.com/6/functions.html (found by backtracking your .js CDN) and it doesn't look like it's a jquery plugin, so would not be used with `$(...)` (Imay be mistaken **edit** page does have some jquery examples: https://getdatepicker.com/6/examples/jquery.html). — freedomn-m, Mar 14 '22 at 11:03
To follow on from @freedomn-m's point above, to extend the tempus library to work with jQuery you need to also reference an additional `jquery-provider.js` script. Docs here: https://getdatepicker.com/6/examples/jquery.html — Rory McCrossan, Mar 14 '22 at 11:08
@RoryMcCrossan I was trying to find how it added itself to jquery as it's not in the source - and there it is at the top of the page I referenced! *The jQuery-provider.js file must be included after the main picker code.* — freedomn-m, Mar 14 '22 at 11:09

score 1 · Answer 1 · edited Mar 14 '22 at 11:26

1

This page outlines using the picker with jQuery. The jQuery-provider.js file must be included after the main picker code. jQuery is no longer a requirement and is here for backwards compatibility.

Forgot to include the JSProvider.js

edited Mar 14 '22 at 11:26

freedomn-m

27,664
8
35
57

answered Mar 14 '22 at 11:14

AZIS SOFYAN PRASETYO

43
6

Uncaught TypeError: $(...).tempusDominus is not a function

1 Answers1