How to create Clock Time Picker on input element using jQuery Clock Time Picker Plugin

sogata(59)

Published in

#utopian-io

Words

498

Reading

3 min

Listen

Play

What Will I Learn?

You will learn how to install and use jQuery Clock Time Picker
You will learn how to add clockTimePicker() method to input element
You will learn kinds of jQuery Clock Time Picker

Requirements

Basic Knowledges about HTML
Basic Knowledges about JavaScript
Need to install or host jQuery and jQuery Clock Time Picker

Difficulty

Basic

Tutorial Contents

jQuery Clock Time Picker is a plugin from jQuery to select the time with a clock. This plugin works on Desktop and Mobile phones. For more detail lets follow the steps bellow:

Installation

Download the plugin on github : https://github.com/loebi-ch/jquery-clock-timepicker
Extract the jquery-clock-timepicker.min.js to new folder

Creating HTML file

Open your text editor.
Create new file save as index.html and save it in the previous folder that you have extracted the jquery-clock-timepicker.min.js file.
Add HTML element as usual.

<html>
<head>
<title>Clock Time Picker</title>
</head>
<body>
</body>
</html>

Create an input text element to input the time.

TIME : <input type="text" id="clock" value="00:00">

Including jquery and jQuery Clock Time Picker to HTML file

Because jQuery Clock Time Picker is part of jQuery so you need to host jQuery file. You can use the CDN if you don't want to download and install it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Include jquery-clock-timepicker.min.js file.

<script src="jquery-clock-timepicker.min.js"></script>

Calling Method.

To write the jQuery Script we should open <script> tag. You can put it in <head> element or in <body> element.

<script></script>

Before add more event in jQuery. There is an event that we should add for the first. It is ready() event. this event to make sure that all html elements are loaded. if it is, then it will load jQuery script. So, all jQuery Script must write in this function event.

$(document).ready(function(){
});

Select the input, Here I select it by id

 $("#clock")

then add the clockTimePicker() method

$("#clock").clockTimePicker();

Save and run the file to see the result.

Modifying the Clock Time Picker

Setting as required, just add the required as method parameter with the value is true like this. Then run the file and try to delete the input.

$("#clock").clockTimePicker({
                required:true
            });

Change the separator.

 $("#clock").clockTimePicker({
                separator:'/'
            });

setting the precision. For example I set 10 minute as precision

$("#clock").clockTimePicker({
                precision:10
            });

allow to select negative duration

$("#clock").clockTimePicker({
                duration:true,
                durationNegative:true
            });

Set maximum and minimum duration

$("#clock").clockTimePicker({
                duration:true, 
                minimum:'01:00', 
                maximum:'03:00'
            });

Full code

<html>
<head>
    <title>Clock TIME Picker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="jquery-clock-timepicker.min.js"></script>
</head>
<body>
    TIME : <input type="text" id="clock" value="00:00">
    <script>
        $(document).ready(function(){
            $("#clock").clockTimePicker({
                required:true,
                separator:'.',
                precision:10,
                duration:true, 
                minimum:'01:00', 
                maximum:'03:00',
                durationNegative:true
            });
        });
    </script>
</body>
</html>