A jQuery Plug-in to select the time with a clock inspired by the Android time picker.

Overview

Clock Timepicker Plugin for jQuery

jquery-clock-timepicker screenshot

See a demo here

A free jQuery Plug-in to select the time with a clock inspired by the Android time picker. This plugin works on Desktop and Mobile phones.

Requirements

Note: You need the regular version of jQuery as the slim version does not include effects, which this library requires.

Installation

Install from NPM as jquery-clock-timepicker.

npm install jquery-clock-timepicker

Usage

$('.your-time-field').clockTimePicker(options);

Include the file jquery-clock-timepicker.min.js in your page. There is no need of a CSS file.

The Plug-in is customizable through the optional options object passed to the jQuery method, i.e.

$('.your-time-field').clockTimePicker({
	duration: true,
	durationNegative: true,
	precision: 5,
	i18n: {
		cancelButton: 'Abbrechen'
	},
	onAdjust: function(newVal, oldVal) {
		//...
	}
});

It is also possible to configure the ClockTimePicker element by using data attributes of the DOM element, i.e.

<input class="time" type="text" data-precision="5" data-minimum="10:00" data-maximum="20:00" />

You can combine the configuration by JavaScript and by the DOM data attributes. For example, you can use the JavaScript configuration to make a standard configuration for all your ClockTimePicker elements on the site and use the DOM data attributes to change configuration for individual elements. The data attributes have precedence over the JavaScript settings.

If you want to set new options at runtime (after an input element already has been intialized), just call the function again with all desired options.

If you want to dispose/destroy an initialized clock time picker element, please use the following code:

$('.your-time-field').clockTimePicker('dispose');

If you want to change the value programmatically at runtime on an already initialized clock time picker element, use the following code:

$('.your-time-field').clockTimePicker('value', '08:00');

Use the following code to show or hide a clock time picker programmatically:

$('.your-time-field').clockTimePicker('show');
$('.your-time-field').clockTimePicker('hide');

Options

  • afternoonHoursInOuterCircle
    Set this option to true to display the afternoon hours in the outer circle instead of the inner circle.
    default: false

  • alwaysSelectHoursFirst
    By default, if you click on the minutes part of your input field, the popup is opened to directly select the minutes. If you set this option to true, popup is always opened to select hours first before selecting the minutes.
    default: false

  • autosize
    Set this to true, if the width of the input field should be automatically adjusted to its content.
    default: false

  • colors.buttonTextColor
    The text color of the buttons display on the mobile phone.
    default: '#0797FF'

  • colors.clockFaceColor
    The color of the clock face.
    default: '#EEEEEE'

  • colors.clockInnerCircleTextColor
    The text color of the numbers displayed in the inner circle.
    default: '#888888'

  • colors.clockInnerCircleUnselectableTextColor
    The text color of the unselectable numbers displayed in the inner circle. (only used in combination with minimum and maximum option)
    default: '#888888'

  • colors.clockOuterCircleTextColor
    The text color of the numbers displayed in the outer circle.
    default: '#000000'

  • colors.clockOuterCircleUnselectableTextColor
    The text color of the unselectable numbers displayed in the outer circle. (only used in combination with minimum and maximum option)
    default: '#000000'

  • colors.hoverCircleColor
    The color of the circle when hovering over an hour or minute.
    default: '#DDDDDD'

  • colors.popupBackgroundColor
    The background color of the popup.
    default: '#FFFFFF'

  • colors.popupHeaderBackgroundColor
    The background color of the popup header displayed only on the mobile phone.
    default: '#0797FF'

  • colors.popupHeaderTextColor
    The text color of the popup header displayed only on the mobile phone.
    default: '#FFFFFF'

  • colors.selectorColor
    The color of the time selector.
    default: '#0797FF'

  • colors.selectorNumberColor
    The text color of the number that is selected.
    default: '#FFFFFF'

  • contextmenu
    If true, the browser's or a custom context menu is shown on right click.
    If false, the right click behaves like the left click and the clock is shown.
    default: false

  • duration
    If true, the hours can be greater than 23.
    default: false

  • durationNegative
    If true, the duration can be negative. This settings only has effect if the setting duration is set to true.
    default: false

  • fonts.buttonFontSize
    The font size of the buttons. These buttons are only displayed in the mobile version.
    default: 20

  • fonts.clockInnerCircleFontSize
    The font size of the numbers that are displayed in the inner circle.
    default: 12

  • fonts.clockOuterCircleFontSize
    The font size of the numbers that are displayed in the outer circle.
    default: 14

  • fonts.fontFamily
    The font family used to display the numbers.
    default: 'Arial'

  • hideUnselectableNumbers
    Set this option to true if you want to completely hide the unselectable numbers (in case you're using minimum and maximum option).
    default: false

  • i18n.cancelButton
    The name of the button to cancel the time change. Only displayed on mobile phones.
    default: 'Cancel'

  • i18n.okButton
    The name of the button to confirm the time change. Only displayed on mobile phones.
    default: 'OK'

  • maximum
    With this option you can define the maximum duration/time. Syntax: hh:mm, i.e. 8:30, 12:00, 24:00, 100:00, ... default: '23:59'

  • minimum
    With this option you can define the minimum duration/time. Syntax: hh:mm, i.e. 06:00, -10:00, -15:45, ... default: '-23:59'

  • modeSwitchSpeed
    The speed in milliseconds of the switch animation when changing between hour and minute selection.
    default: 500

  • onlyShowClockOnMobile
    If true, the clock time picker is not shown on Desktop version.
    default: false

  • onAdjust
    Called when the time value is been adjusting. Compared to onChange this function is called each time when the value is changing, also while dragging the time selector...
    default: function(newValue, oldValue) {}

  • onChange
    Called when the time value has been changed. This function is called when the input field is loosing its focus.
    default: function(newValue, oldValue) {}

  • onClose
    Called when timepicker popup has been closed.
    default: function() {}

  • onModeSwitch
    Called when timepicker is switching between hour and minute selection mode. Argument selectionMode is "HOUR" or "MINUTE".
    default: function(selectionMode) {}

  • onOpen
    Called when timepicker popup has been opened.
    default: function() {}

  • popupWidthOnDesktop
    The width of the popup in the Desktop version in pixels. On the mobile phone the width is automatically calculated.
    default: 200

  • precision
    When setting the precision to i.e. 5, user may only choose time in 5 minutes steps (8:00, 8:05, 8:10, ...). Valid values for precision are: 1, 5, 10, 15, 30, 60.
    default: 1

  • required
    If this option is set to true, a user cannot empty the field by hitting delete or backspace.
    default: false

  • separator
    The separator separating the hour and the minute parts.
    default: :

  • useDurationPlusSign
    If set to true, positive durations use the plus sign (+) as a prefix.
    default: false

  • vibrate
    If this is activated the mobile phone vibrates while changing the time.
    default: true

Help

Submit a GitHub Issues request.

Changelog

Version 2.6.2

  • New configuration setting contextmenu added. See above in the Options section for explanation. Closes pull request #43.

Version 2.6.1

  • jQuery version notice included in README.md
  • ClockTimePicker's version number included as query parameter when loading jquery-clock-timepicker.min.js in index.html to solve browser caching issue for new released versions.

Version 2.6.0

  • Minified JavaScript without eval() to solve issue #34.
  • Setting HTML value attribute upon time change.
  • Get value by calling $('.your-time-field').clockTimePicker('value'); or $('.your-time-field').clockTimePicker('val');
  • Set value by calling $('.your-time-field').clockTimePicker('value', '08:00'); or $('.your-time-field').clockTimePicker('val', '08:00');

Version 2.5.0

  • Don't open clock canvas when setting value programmatically with $('.your-time-field').clockTimePicker('value', '08:00');
  • New function to show clock canvas programmatically with $('.your-time-field').clockTimePicker('show');
  • New function to hide clock canvas programmatically with $('.your-time-field').clockTimePicker('hide');

Version 2.4.0

  • Position popup "fixed" instead of "absolute" to prevent popup from cut-off in containers with overflow: hidden.
  • Slow down scroll wheel event so that the clock timepicker doesn't spin uncontrollable when using touchpad.
  • Update to jQuery 3.5

Version 2.3.5

  • Issue #29 fixed.
  • Blur input element on enter.

Version 2.3.4

  • Method onInputElementKeyUp completely refactored to simplify and to solve issue #21.
  • Arrow keys and +/- sign behavior refactored. No wheelspin anymore, stop at minimum and maximum values.
  • Bugfix for bluring input element when switching from one clock timepicker element to another one.

Version 2.3.3

  • Issue #14 fixed by inserting code Yauheni-Butski proposed.
  • Issue #28 fixed by changing code as proposed by Yauheni-Butski.

Version 2.3.2

  • Issue #22 fixed. Using div and spans instead of input element on mobile phones to prevent context menu and cursors to show up.
  • Issue #23 fixed. Rounding problem on initialization solved when using option precision.
  • Issue #25 fixed. New option alwaysSelectHoursFirst inserted.

Version 2.3.1

  • Bugfix for entering durations with keyboard when useDurationPlusSign is set to true
  • Removed unwanted Console.log

Version 2.3.0

  • Issue #15 solved.
  • Feature request #17 implemented: Showing unselectable numbers when using minimum and maximum options.
  • Hide unselectable numbers completely by using hideUnselectableNumbers option.
  • Configure text colors for unselectable numbers with new options clockInnerCircleUnselectableTextColor and clockOuterCircleUnselectableTextColor.
  • Feature request #18 implemented: Use of data attributes to configure ClockTimePicker element.
  • Bugfix for wrong hovering when using afternoonHoursInOuterCircle (Issue #16).

Version 2.2.5

  • Fixed a converting bug when switching between minus and plus sign.

Version 2.2.4

  • Hide example console output that was deployed in version 2.2.3 by mistake.

Version 2.2.3

  • Option useDurationPlusSign implemented.

Version 2.2.2

  • Issue #12 fixed.

Version 2.2.1

  • Issue #9 perfectionated to select hour/minute part with mouse click.
  • Parse number settings as integer to prevent errors in calculations in case that a string is passed.
  • Pull request #11 from reclaimingmytime inserted.

Version 2.2.0

  • Issue #7 fixed. Now this plugin works in both portrait and landscape mode on the mobile phone.

Version 2.1.10

  • Bluring issues fixed.

Version 2.1.9

  • Directly select minute when clicking inside the minute part.
  • Bluring issues fixed.
  • Issue #9 perfectionated to select hour/minute part with mouse click.
  • Autosizing adjusted so that jquery-clock-timepicker works together with sortablejs.
  • Hide time picker when deleting content with delete or backspace.
  • Show 00:00 when focusing an empty timepicker.

Version 2.1.8

  • Fixed an issue with overlapping popup when input element has a top margin.

Version 2.1.7

  • Issue #9 fixed. Better approach to select hour/minute part with mouse click.

Version 2.1.6

  • Bugfix when entering time/duration with keyboard on an empty input field.
  • Bugfix for keys "+" and "-" in 2.1.5 leaded to another bug with negative duration fields. Corrected in this version.

Version 2.1.5

  • Precision 60 bugfix: In some cases the time picker switched to minute mode although precision 60 was set.
  • Bugfix for keys "+" and "-" to adjust value in correct direction: + = plus, - = minus.

Version 2.1.4

  • Added function to set value on an already initialized clock time picker element at runtime.

Version 2.1.3

  • Support for keypad with num lock.

Version 2.1.2

  • Call event functions with call() using the element as context so that you can use $(this) inside the callback function to access the element.

Version 2.1.1

  • Bugfix: Sign button clickable on mobile phone

Version 2.1.0

  • Make it possible to dispose an already initialized clock time picker element.
  • Changed the default value for the option autosize from true to false.
  • New option required added: If you don't want the user to empty the input element, you can set this option to true.
  • New event onAddjust added: This option is called on each adjustment of the value, including dragging the timeselector.
  • Sign button +/- implemented in canvas instead of an HTML element to prevent styling issues depending on different global CSS layouts.
  • Selection of hour and minute part with the mouse improved (now also taking account of input element's padding).
  • Key handling improved for backspace, delete and minus key.
  • Arrow keys up and down switched.
  • Context menu on right click disabled.
  • Implementation of maximum and minimum option.

Version 2.0.0

  • Event management completeley refactored so that one can use the input's default onchange event.

Version 1.x

  • No changelog available for the first versions of this jQuery component.

This software is made available under the open source MIT License. © 2022 Andreas Loeber and contributors

Comments
  • Blurred font on HiDPI devices

    Blurred font on HiDPI devices

    On HiDPI devices, the font for part of the switcher looks blurred.

    The following screenshot was taken on a 5.5-inch 1080p phone. You can see the font of the clock is blurred: HiDPI

    This is what the font looks like in Firefox's responsive design view, where the clock looks sharper: normal

    opened by reclaimingmytime 15
  • when precision is 60, does it possiable not switch to minute mode?

    when precision is 60, does it possiable not switch to minute mode?

    when precision is 60, the minute is unable to change, but after I input in the hour field, the clock changed to minute mode, I think close panel is more friendly.

    opened by wzshuang 6
  • Set time by JavaScript

    Set time by JavaScript

    Hi Andy,

    now I need to set the time using JavaScript. Therefore I've written these two lines of code:

    $input.val("08:00");
    $input.parent().find('canvas:first').trigger('mousemove'); // repaints canvas
    

    As you can see I am setting the time of the input field and then try to repaint your canvas by triggering the mousemove event. This works fine on desktops and tablets but fails on smartphones (e.g. Android 6.0.1 Chrome 63.0). I guess there's no such thing as mouse events on smartphones. So a function to repaint/refresh your timepicker would be of great help.

    Thanks for your awesome timepicker though!

    Best regards

    Andi

    opened by Erando89 6
  • Kastaldi

    Kastaldi

    I have a custom contextmenu that doesn't work anymore that doesn't work anymore when I use the timepicker plugin. I added "contextmenu" setting, true or false. Default is false. if true you can call contextmenu right clicking the box. If false, timepicker is shown when you click right mouse button. You can use it when you have a custom context menu . I also modified the index.html ".standard" input to show you how it works. Hope I didn't break anything because it is the first time I use github with vscode.

    opened by kastaldi 5
  • value is not changing

    value is not changing

    Hi I used onAudjust and also try onChange to change the value. but value on changing. can you plaese help.

    onAdjust: function(newVal, oldVal) {
    

    return $(this).attr('value');
    }

    opened by RoomLea 4
  • Problem with Bootstrap 3.4.1.

    Problem with Bootstrap 3.4.1.

    Hi! Our customers are very satisfied with the ClockTimerPicker. We are on an old project with Bootsrap 3.4.1. As Bootstrap's modal uses transform css, widget's fixed position doesn't work. Here is a jsfiddle : https://jsfiddle.net/f4gs6vde/ We found a workaround by overriding the modal's transform behavior.

    But fixed position is maybe not the most robust solution.

    opened by veolys-nanne 3
  • Issue hours with precision 5

    Issue hours with precision 5

    Hi, we use the timepicker with a precision of 5. When it is 09:58 (or 09:59), the time is rounded to 09:00 instead of 10:00. What can we do to solve this? With regards Kynosoft

    opened by kynosoft 3
  • onOpen: Get original input

    onOpen: Get original input

    Hi Andy,

    sorry to bother you again. I make use of the onOpen option:

    var clockTimePickerOptions = {
        precision: 15,
        onOpen : handleClockTimePickerOpenEvent,
        autosize: false
    };
    function initClockTimePickerPlugin() {
        $('.clockTime').clockTimePicker(clockTimePickerOptions);
    }
    function handleClockTimePickerOpenEvent() {
        console.log($(this));
    }
    

    I would expect $(this) to return the input which triggered the plugin in the first place. How do I access that input?

    Best regards

    Erando

    opened by Erando89 3
  • Ability to also set seconds

    Ability to also set seconds

    Pretty timepicker! an option to enable also selecting seconds would be awesome. just copy minutes page for layout. some backend stuff needed for that tho

    opened by xztraz 2
  • Auto-close picker

    Auto-close picker

    If I open the picker and then I select only the hour (or neither it...) and then I click somewhere outside the picker (maybe on another input, or a submit button...) the picker doesn't close but remains visible... It would be useful to have an autoclose option... (maybe I didn't find it...) Thank you

    opened by Polm90 2
  • [Mobile]. Hour/Minute doesn't selected with single 'touch' to a value

    [Mobile]. Hour/Minute doesn't selected with single 'touch' to a value

    I founded that I can't select value with single 'touch'. For 'Hours' mode picker just leave 'hour' value as '00' and change mode to 'Minutes'. But all works fine when I hold my finger and move it ('touchmove').

    So, I founded that function 'processTimeSelection' depends on 'isDragging' value. But this value is set to 'true' only after calling 'processTimeSelection'.

    So, I fixed it with simple replacing initialization before calling function. I don't no, should you fix it ot it is desired behavior for mobile version, so I will just leave it here. jquery-clock-timepicker

    opened by Yauheni-Butski 2
  • Selecting hours with the shift key does not work

    Selecting hours with the shift key does not work

    Hello,

    Your clock timepicker library is very convenient to use on mobile, however on my laptop I found a problem : I tried to use the shift key to select a time or duration however the key is blocked. I searched in the library and I noticed that you have blocked the use of the shift key (line 1537 => event.shiftkey). Would it be possible to put an option to activate it or unblock it by deleting this part of the code ?

    Sincerely Guiguess.

    opened by Guiguess68210 2
  • Add SVG support

    Add SVG support

    I know, this might be a huge change, but it will give you the power of CSS. This will allow you to dynamically change between a light and dark theme for example.

    opened by jepsar 0
  • Inline

    Inline

    Hi there!

    I'm trying to get the clockpicker inline, but I'm having difficulties getting it to work. Even whilst editing the source I haven't quite been able to figure out how to achieve this.

    Perhaps you have an idea on how this could be achieved?

    Thanks in advance!

    opened by crashkonijn 5
Releases(v2.6.2)
  • v2.6.2(Mar 1, 2022)

  • v2.6.1(Feb 24, 2022)

    • Minified JavaScript without eval() to solve issue #34.
    • Setting HTML value attribute upon time change.
    • Get value by calling $('.your-time-field').clockTimePicker('value'); or $('.your-time-field').clockTimePicker('val');
    • Set value by calling $('.your-time-field').clockTimePicker('value', '08:00'); or $('.your-time-field').clockTimePicker('val', '08:00');
    • jQuery version notice included in README.md
    • ClockTimePicker's version number included as query parameter when loading jquery-clock-timepicker.min.js in index.html to solve browser caching issue for new released versions.
    Source code(tar.gz)
    Source code(zip)
  • v2.5.0(Oct 30, 2021)

    • Don't open clock canvas when setting value programmatically with $('.your-time-field').clockTimePicker('value', '08:00');
    • New function to show clock canvas programmatically with $('.your-time-field').clockTimePicker('show');
    • New function to hide clock canvas programmatically with $('.your-time-field').clockTimePicker('hide');
    Source code(tar.gz)
    Source code(zip)
Owner
Andy
Andy
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
JQuery Speaking Clock Plugin

jsRapClock JQuery Speaking Clock Plugin More information about this can be found in this article. Demo https://thibor.github.io/jsRapClock/ Properties

null 3 Feb 27, 2022
A jQuery plug-in to notify you of CSS, Attribute or Property changes in an element

selectWatch.js jQuery plug-in gives an opportunity to monitor changes of DOM element's CSS styles, attributes, properties, input element or select ele

Fatih Kazancı 3 Oct 28, 2022
VanillaSelectBox - A dropdown menu with lots of features that takes a select tag and transforms it into a single or multi-select menu with 1 or 2 levels

vanillaSelectBox v1.0.0 vanillaSelectBox : v1.00 : Adding a package.json file New : Possibility to change the dropdown tree and change the remote sear

philippe MEYER 103 Dec 16, 2022
A super-lightweight, highly configurable, cross-browser date / time picker jQuery plugin

Zebra Datepicker A super-lightweight, highly configurable, cross-browser date/time picker jQuery plugin Zebra_Datepicker is a small yet and highly con

Stefan Gabos 391 Dec 29, 2022
A simplified jQuery date and time picker

jSunPicker A simplified jQuery date and time picker Why another Date picker? There are numerous date, time pickers out there. However, each of those l

null 1 May 31, 2022
A rainy clock in your terminal.

era v0.1.0 A rainy clock in your terminal, written with Deno. Installation git clone this repo and compile it. git clone https://github.com/kyoheiu/er

Kyohei Uto 32 Dec 29, 2022
A tiny clock and date, period, or duration math library < 2k (minified/gzipped)

timewave v0.1.4 A tiny time simulation and date/time math library < 3k (minified/gzipped) const clock = Clock(new Date(2022,1,1),{tz:'America/New_York

Simon Y. Blackwell 46 Dec 18, 2022
Plug-in for Obsidian.md which will create Notes from JSON files

Import JSON This plug-in provides you with the tools to import your favourite JSON tables. A magnifying-glass icon will appear in the left margin when

Martin 33 Dec 31, 2022
Write and read comments on every page with a simple plug-in for your browser

Licom - comments on every webpage Licom is a simple plugin for your browser that adds the feature to leave comments on every page, even if it doesn't

Sebastian Korotkiewicz 45 Aug 4, 2022
A Hackable Markdown Note Application for Programmers. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, plug-in, and macro replacement.

Yank Note A hackable markdown note application for programmers Download | Try it Online >>> Not ecommended English | 中文说明 [toc]{level: [2]} Highlights

洋子 4.3k Dec 31, 2022
A lightweight tooltip plug-in library

popper-next 是一款轻量的 Tooltip 插件 vue、react安装使用 推荐yarn yarn add popper-next 或者 cnpm install popper-next -S 在html页面中如何使用 <script src="https://unpkg.com/pop

east-wzd 4 Dec 7, 2022
Robust, plug & play generator for Bootstrap toasts.

Bootstrap Toaster Robust, plug & play generator for Bootstrap toasts. Supports Bootstrap 4 and Bootstrap 5. Demo A demo page is available at bootstrap

Peyton Gasink 22 Dec 21, 2022
Plug-and-play, faster-than-native promise/callback event emitter

kNow Blazing-fast callback/promise-based events with a tiny footprint What is this? With kNow (pronounced "now"—the k's silent), JavaScript event mana

Elijah Bodden 25 Sep 11, 2022
jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light <7ko min.js and <1Ko min.css.

Nice-Scrollbar Responsive jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested

Renan LAVAREC 2 Jan 18, 2022
Flat and simple color-picker library. No dependencies, no jquery.

Flat and simple color-picker Fully Featured demo Features Simple: The interface is straight forward and easy to use. Practical: Multiple color represe

Ivan Matveev 15 Nov 14, 2022
Turn an HTML input box to a duration picker, without jQuery

html-duration-picker.js html-duration-picker.js is a very tiny JS library used for transforming a native HTML text input into a duration picker. The a

Dan Chif 27 Oct 19, 2022
Nepali Multi Date Picker for jQuery. Supports both single date selections and multiple date selection.

Nepali Multi Date Picker A simple yet powerful date picker based in Nepali calendar. Supports both single date selections and multiple date selection.

Sanil Shakya 4 May 23, 2022
Simple date and time picker in vanilla javascript

simplepicker Simple datetime picker in vanilla javascript. This project is mostly based on material-datetime-picker, but without it relying on externa

Priyank Patel 51 Jul 18, 2022