$(...).datetimepicker is not a function when included in a .hbs template

Question

$(...).datetimepicker is not a function when included in a .hbs template

46 views Asked by nightfixed At 14 September 2024 at 19:05

I have an .hbs template where I need to add the date-time picker widget.

Here's what I currently have:

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"
             integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"
             integrity="sha512-+UiyfI4KyV1uypmEqz9cOIJNwye+u+S58/hSwKEAeUMViTTqM9/L4lqu8UxJzhmzGpms8PzFJDzEqXL9niHyjA=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
          <link rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"
             integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw=="
             crossorigin="anonymous" referrerpolicy="no-referrer"/>
       </head>
       <body>
          <input id="date_timepicker_start" type="text" >
          <input id="date_timepicker_end" type="text" >

          <script src="/javascripts/datetime.js"></script>
       </body>

Inside this script, datetime.js, I have the following line:

$(document).ready(function(){
    $('#date_timepicker_start').datetimepicker({ ... });
});

When I load my page, I get:

jquery.js:3793 Uncaught TypeError: $(...).datetimepicker is not a function
    at HTMLDocument.<anonymous> (datetime.js:2:33)
    at mightThrow (jquery.js:3489:29)
    at process (jquery.js:3557:12)

Now, why would this be ? jQuery definitely loads fine, I can use alert for example, to confirm it loaded. Why not the datetimepicker?

Original Q&A

There are 1 answers

**john Smith** · Answer 1 · 2023-12-16 15:17:00

I made a snippet showcasing that your code is perfectly fine, maybe check your network tab why the datetimepicker.js is not loaded, at least here it does:

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"
             integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"
             integrity="sha512-+UiyfI4KyV1uypmEqz9cOIJNwye+u+S58/hSwKEAeUMViTTqM9/L4lqu8UxJzhmzGpms8PzFJDzEqXL9niHyjA=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
          <link rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"
             integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw=="
             crossorigin="anonymous" referrerpolicy="no-referrer"/>
       </head>
       <body>
          <input id="date_timepicker_start" type="text" >
          <input id="date_timepicker_end" type="text" >

          <script>
          $(document).ready(function(){
             $('#date_timepicker_start').datetimepicker();
             $('#date_timepicker_end').datetimepicker();
          });
          </script>
       </body>

TechQA.

$(...).datetimepicker is not a function when included in a .hbs template

There are 1 answers

Related Questions in JQUERY

Related Questions in DATETIMEPICKER

Related Questions in HBS

Popular Questions

Popular Tags

Trending Questions