Socket
Socket
Sign inDemoInstall

jquery-clock-timepicker

Package Overview
Dependencies
1
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

jquery-clock-timepicker

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.


Version published
Maintainers
1
Weekly downloads
238
decreased by-31.01%

Weekly downloads

Readme

Source

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

  • jQuery

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.5

  • Bugfix for undefined variable in canvas event methods.

Version 2.6.4

  • for loop variable i declared with let.

Version 2.6.3

  • Made disturbing blinking cursor transparent, so it's not visible anymore.

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. © 2024 Andreas Loeber and contributors

Keywords

FAQs

Last updated on 20 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc