Why won't Jquery ClockPicker work with React?

Question

I am trying to integrate jQuery ClockPicker into my react app, but it won't work.

I have possibly tried the all possible ways without success. jQuery itself works well, but the ClockPicker doesn't.

It gives me an error:

Uncaught TypeError: clockpicker.clockpicker is not a function

These are my HTML and CDN links:

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="description" content="The Brring Web Client">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css" integrity="sha256-lBtf6tZ+SwE/sNMR7JFtCyD44snM3H2FrkB/W400cJA=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-87DrmpqHRiY8hPLIr7ByqhPIywuSsjuQAfMXAE0sMUpY3BM7nXjf+mLIUSvhDArs" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/jquery-clockpicker.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="js/app.js"></script>
</body>
</html>

This is the function where I initialize the ClockPicker:

import * as $ from "jquery";   
 class example {
    ... other staff
    initializeTimePicker() {
        jQuery(function($) {
           let clockpicker = $(".clockpicker");
           clockpicker.clockpicker();
        });
     }
  }

  export default new CallUtil();

And finally, I call this function in another component's componentDidMount lifecycle:

import CallUtil from 'some_folder'    
componentDidMount(): void {
        CallUtil.initializeTimePicker();
}

What have I done wrong?

Why won't Jquery ClockPicker work with React?

0 Answers0