jquery timepicker cdnjs cloudflare does not working

Question

i am using jQuery to plugin in and want to create a input field that i could select time. How come it doesn't work?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

this is the js i have used. i have also used bootstrap js n jquery

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

this is the code i used in my javascript file

this is my input field

<div class="form-group col-md">
    <input class="form-control" id='timepicker' type='text' name='timepicker' />
</div>

when i checked the console I'm getting the error that

jquery-3.5.1.slim.min.js:2 Uncaught TypeError: $(...).timepicker is not a function
    at HTMLDocument.<anonymous> (appointments.js:2)
    at e (jquery-3.5.1.slim.min.js:2)
    at t (jquery-3.5.1.slim.min.js:2)

Answer 1

jQuery Timepicker can parse the most used time representations allowing you and your users to enter time using their prefered way for writing it.

To use jQuery Timepicker you'll need to include two files: jquery.timepicker.min.js and jquery.timepicker.min.css. Then, assuming you have an <input> element in your document, with class timepicker, you can use the code on the right (or the code below, if you are reading on mobile) to initialize the plugin.

The plugin is available from different sources, choose the one that goes better with your project!

npm

npm i jquery-timepicker

Bower

bower install jquery-timepicker-wvega --save

If you need to know more about Cloud Computing, We recommend joining Cloud Computing Training today.