Add Timepicker to Input Field using jQuery

jQuery Timepicker helps the user to select time without typing manually. Generally, timepicker is used with datepicker to allow the user to enter the date & time in a form. In this tutorial, we will show you how to add timepicker to input filed using jQuery.

jQuery Timepicker plugin enhance form input field and add 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.

Add Datepicker to Input Field using jQuery UI

jQuery Timepicker Plugin

Include jQuery and timepicker library to use Timepicker plugin.

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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
    });
});

You can extend the timepicker functionality with various configuration options, see all available options from here.

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 filed, see this tutorial – Add Date-Time Picker to Input Field using jQuery

Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request

Leave a reply

keyboard_double_arrow_up