jQueryUI timePicker - widget for timing

In the process of working on a corporate project, it is often necessary to switch to the tasks of developing a user interface. Of course, to implement the front-end, we have not reinvented bicycles for a long time, but use ready-made components. It would seem that for all occasions there is already a plugin, but recently I was surprised to find that there are a huge number of implementations of calendar elements for the date picker field, but the time picker is somehow by-passed.



I don’t know if I’ve been looking badly (there’s only one similar to plugins.jqueri.com - KitKatClock, but it’s somewhat “unfinished”), or I don’t want to search, or nobody really cares about this element. In general, since the part of the interface I was developing was focused on filling the fields with a finger (the target audience of the devices is the infokiosk) or, more rarely, with a mouse, and there were plenty of fields for entering time, I decided to give birth to another useless jquery plugin.



So. Statement TK.

1. The main tasks that the element must solve are: faster time entry into the field, without a keyboard. Ideally - in two clicks. The timing algorithm must be intuitive;
2. The initial focus on touch screens. The element should prevent unwanted ascending of the on-screen keyboard of the device; correctly positioned on the screen so that, if possible, do not close the input field and do not go beyond the screen;
3. On desktop machines, do not interfere (and it is better to help) to the user to fill in the field from the keyboard, if he uses it as the primary means of input. The help can consist, say, in autosubstitution of the dividing ":" character. Those. it is enough for a person to enter only numbers;
4. Ensure compatibility with older browsers. Yes, yes - without IE6 anywhere. Targeted infokiosks use specialized software based on you-know-who and exactly that version libraries;
5. Ensure compatibility with jQueryUI Calendar. Our element should work correctly with the fields to which our favorite calendar is already attached, complementing it and not interfering with it;
6. Connection and use should be simple.

Connecting an item is almost trivial:

')

<link rel="stylesheet" href="clock-ui.css" type="text/css"/> <script language="javascript" src="clock-ui.min.js"></script> 

True, there is one thing. Element uses images. And these images can be located in completely different places. Images are written in styles. That is, using such an element on your site, you must place the pictures where necessary, and then make the appropriate changes to the styles.









Activating an item is even easier:

 $('input.time').timePicker(); 

Here we associate all the text fields that have the time class with our element. And repeated calls are allowed.



You can call for the fields associated with the calendar, provided that the calendar is initialized first. In order for timePicker to insert the time value into such combined fields, you must set the dateFormat option (and / or altFormat) with the 'T' character separated by at least one space:

 $('.date') .datepicker({dateFormat: 'dd.mm.yy T'}) .timePicker(); 

If the calendar has altField and altFormat and also contains 'T', the time will be set in it.



The timePicker element supports initialization with options. There are not many options, but they are there.

• The touchscreen parameter tells the element: is the current device type touch sensitive? In fact, the element itself is able to identify such devices. However, in the process of testing on the kiosks, we faced the fact that the screens of the info kiosks, although touch-sensitive, do not support the touchstart event built-in browser. What led to a malfunction of the element. Use the parameter to solve such situations.
• The compatible parameter (default is true). Designed for compatibility with older browsers. For example, an element needs the browser to support border-radius and background-size - otherwise the layout will be incorrect. If there is support for these properties, feel free to set compatible = false, for example:
  
  
  
  

   $('.time').timePicker({ compatible: !(Modernizr.backgroundsize && Modernizr.borderradius) }); 

  
  
  
• The defaultHour , defaultMinute parameters set the “default” time for empty fields. The time is set in a 12-hour format (from zero). The PM (logical) parameter indicates after noon. For example, the code below makes the element assume that empty fields (or initially incorrectly filled in), time is 12:00:
  
  
  
  

   $('.time').timePicker({ defaultHour: 0, defaultMinute: 0, PM: true }); 

  
  
  
• Finally, onOpened , onClosed set your handlers to open and close the widget accordingly. Important note: the handler is called after the widget changes its visibility.

There are two ways to get the time value selected in the field.



First: directly read the value of the field. In our project, such fields go as strings and are analyzed on the server side, so this solution suits us perfectly.



Second: you can read the time in the "raw" format, for example, like this:

 var hours = $('#element').data().hours, minutes = $('#element').data().minutes, pm = $('#element').data().pm_time; 

Finally, if you need to get the time in unix format (in seconds from the beginning of the day), use:

 $('#element').date().time; 

Those who wish to test the operation of the element are welcome .



The project, as it was, on the githaba .