Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact.

Features:

  • Highly customizable to meet your specific requirements
  • Mouse wheel support
  • Support for navigation using the keyboard
  • Lightweight and easy to use

Must Read: A Simple and Modern Event Calendar In jQuery | Evo-Calendar

How to make use of it:

1.  Include jQuery library and timepicker.js

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.timepicker.js"></script>

2. Include time picker CSS to type your time picker.

<link rel="stylesheet" href="jquery.timepicker.css" />

3. Create a text area for the time picker.

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

4. Call the plugin on the textual content.

$(function() {
  $('#basicExample').timepicker({
    // options here
  });
});

5. Public strategies.

// Get the time as an integer, expressed as seconds from 12am.
$('#getTimeExample').timepicker('getSecondsFromMidnight');

// Get the time using a Javascript Date object, relative to a Date object (default: today's date).
$('#getTimeExample').timepicker('getTime');
$('#getTimeExample').timepicker('getTime', new Date());

// Close the timepicker dropdown.
$('#hideExample').timepicker('hide');

// Change the settings of an existing timepicker. 
// Calling option on a visible timepicker will cause the picker to be hidden.
$('#optionExample').timepicker({ 'timeFormat': 'g:ia' });

// Unbind an existing timepicker element.
$('#removeExample').timepicker('remove');

// Set the time using a Javascript Date object.
$('#setTimeExample').timepicker('setTime', new Date());

// Display the timepicker dropdown.
$('#showExample').timepicker('show');

All default customization options.

Must Read: Calendar Component and Convenient Date Picker | tui.date picker

  • show2400: false: Show 24:00 as an option when using the 24-hour time format.
  • className: null: A class name to apply to the HTML element that contains the timepicker dropdown.
  • minTime: 12:00am: The time that should appear first in the dropdown list.
  • maxTime:: The time that should appear last in the dropdown list. Can be used to limit the range of time options. default: 24 hours after minTime
  • showOnFocus: true: Display a timepicker dropdown when the input gains focus.
  • showDuration: false: Shows the relative time for each item in the dropdown. minTime or durationTime must be set.
  • durationTime:: The time against which showDuration will compute relative times. default: minTime
  • step: 30: The amount of time, in minutes, between each item in the dropdown.
  • timeFormat: ‘g:ia’: How times should be displayed in the list and input element. Uses PHP’s date() formatting syntax.
  • scrollDefault: null: If no time value is selected, set the dropdown scroll position to show the time provided.
  • orientation: ‘ltr’,: ltr or rtl.
  • selectOnBlur: false: Update the input with the currently highlighted time value when the time picker loses focus.
  • appendTo: Override where the dropdown is appended. Takes either a string to use as a selector, a function that gets passed the clicked input element as an argument, or a jquery object to use directly default: “body”

Must Read: 📅 A Simple Dynamic Calendar In Javascript | tui.calendar

  • disableTouchKeyboard: true, Disable the onscreen keyboard for touch devices.
  • forceRoundTime: false: Force updates the time to step settings as soon as it loses focus. default: false
  • listWidth: null: Set to 1 to match input width, 2 to double input width, .5 to halve input width, etc
  • disableTimeRanges: [],: Disable selection of certain time ranges. Input is an array of time pairs, like `[[‘3:00 am’, ‘4:30 am’], [‘5:00 pm’, ‘8:00 pm’]] default: []
  • closeOnWindowScroll: false, Close the time picker when the window is scrolled. (Replicates <select> behavior.) default: false
  • typeaheadHighlight: true, Highlight the nearest corresponding time option as a value is typed into the form input. default: true
  • noneOption: false: Adds a “None” option to the top of the timepicker dropdown default: false
  • showOn: true: Display a timepicker dropdown when the input fires a particular event. Set to false to disable automatic display.
  • disableTextInput: false: Disable typing in the timepicker input box; force users to select from the list.
  • lang: { am: ‘am’, pm: ‘pm’, AM: ‘AM’, PM: ‘PM’, decimal: ‘.’, mins: ‘mins’, hr: ‘hr’, hrs: ‘hrs’ }: Language constants used in the timepicker. Can override the defaults by passing an object with one or more of the following properties: decimal, mins, hr, hrs.
  • roundingFunction: round to nearest step: Function used to compute rounded times. The function will receive time in seconds and a settings object as arguments. The function should handle a null value for seconds.
  • stopScrollPropagation: false: When scrolling on the edge of the picker, it prevents parent containers () to scroll.
  • useSelect: false: Convert the input to an HTML SELECT control. This is ideal for small-screen devices, or if you want to prevent the user from entering arbitrary values. This option is not compatible with the following options: appendTo, closeOnWindowScroll, disableTouchKeyboard, forceRoundTime, scrollDefault, selectOnBlur, typeAheadHighlight.

See Demo And Download

Timepicker-Plugin-for-jQuery

Official Website(jonthornton): Click Here

This superior jQuery/javascript plugin is developed by jonthornton. For extra Advanced Usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…

Lightweight-jQuery-Input-Mask-Plugin

Simple and Easy jQuery Input Mask Plugin | InputMask-Phone-Numbers

jquery-input-mask-phone-number.js – Simple and easy jquery phone number mask library. JQuery Plugin for masks input field to US phone format. Must Read: jQuery Creates an Input Mask…

Leave a Reply

Your email address will not be published. Required fields are marked *