Add Timepicker to Input Field using jQuery

jQuery Timepicker helps the user to select time from a dropdown without typing manually. Generally, a time-picker is used with a date-picker to allow the user to enter the date & time in an input field. In this tutorial, we will show you how to add timepicker to the input field using jQuery.

The jQuery UI library is the easiest option to add date-picker to input field. If you want to add timepicker to the input field, here we will provide an example code snippet to convert HTML input to a timepicker select dropdown. jQuery timepicker plugin enhances the form input field and adds a time select feature. You can easily convert an HTML element to timepicker with jQuery. By adding jQuery Timepicker, a drop-down select box will open when the associated input element is focused. The user can choose a time (hour, minute, second) from the timpicker select options.

jQuery Timepicker Plugin

Include jQuery and timepicker library to use Timepicker plugin.

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- jQuery timepicker library -->
<link rel="stylesheet" href="jquery-timepicker/jquery.timepicker.min.css">
<script src="jquery-timepicker/jquery.timepicker.min.js"></script>

Add Timepicker to Input Field

Basic Timepicker Functionality

This example code adds a simple timepicker to the input field.

HTML Code:
On the input field focus, a timepicker select box will open in an overlay.

<input type="text" id="time"/>

JavaScript Code:
The input field ID (time) needs to be specified as timepicker selector.

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

Advanced Timepicker Functionality

The following examples are some advanced configuration options that can be used in jQuery Timepicker.

Time Format:
By default, timepicker uses h:mm format. Use timeFormat option to change the time format as per your needs.

$(document).ready(function(){
    $('#time').timepicker({
        timeFormat: 'h:mm:ss p'
    });
});

Time Interval:
Use interval option to separate in minutes between time entries in the dropdown menu.

$(document).ready(function(){
    $('#time').timepicker({
        timeFormat: 'h:mm p',
        interval: 15, 
    });
});

Restrict Time Range:
Initially, anytime can be selected, but you can restrict time range using minTime and maxTime option.

$(document).ready(function(){
    $('#time').timepicker({
        timeFormat: 'h:mm p',
        interval: 15,
        minTime: '10',
        maxTime: '6:00pm',
    });
});

Start Time:
Use startTime option to set first time in the time select box.

$(document).ready(function(){
    $('#time').timepicker({
        timeFormat: 'h:mm p',
        interval: 15,
        minTime: '10',
        maxTime: '6:00pm',
        startTime: '10:00'
    });
});

Default Time:
Use defaultTime option to specify a default time in the input field.

$(document).ready(function(){
    $('#time').timepicker({
        timeFormat: 'h:mm p',
        interval: 15,
        minTime: '10',
        maxTime: '6:00pm',
        startTime: '10:00',
        defaultTime: '11'
    });
});

Display Scrollbar:
Specify scrollbar option as true to display scrollbar in the dropdown.

$(document).ready(function(){
    $('#time').timepicker({
        timeFormat: 'h:mm p',
        interval: 15,
        minTime: '10',
        maxTime: '6:00pm',
        startTime: '10:00',
        defaultTime: '11',
        scrollbar: true
    });
});

Conclusion

Using the jQuery Timepicker plugin you can easily add a timepicker functionality in the HTML element. Also, you can use some advanced configuration options to extend timepicker as per your requirement. If you want to add datepicker and timepicker to the input field, see this tutorial – Add Date-Time Picker to Input Field using jQuery