Jquery time selector ClockPicker (analog clock) usage

A time selector is needed in recent projects. The bootstrap-datetimepicker used previously is very useful when selecting a date, but its time selection (Time: minute) is a bit awkward, later, I found that the timer for raising the alarm in Android was quite good, so I decided to develop a time selector similar to the analog clock.

At first, I was just planning to create a component for Bootstrap. Later I found that I only used Bootstrap. popover and some. btn styles, so I can extract these styles so that they can be independently used as a jQuery plug-in at the same time.

Let's take a look at the screenshots. People who have used Android phones should be familiar with this:

The code is as follows:	Copy code
$ ('. Clockpicker'). clockpicker (); . Input-group { Width: 110px; Margin: 50px; } <Div class = "input-group clockpicker"> <Input type = "text" class = "form-control" value = "09:30"> <Span class = "input-group-addon"> <Span class = "glyphicon-time"> </span> </Span> </Div>

Browser compatibility

Supports all mainstream browsers, including IE 9 +. Theoretically, it can run normally in IE 8, except for No rounded border or pointer effect. However, I did not carefully test its performance in IE 8.

If your project must be compatible with IE 6/7, you may have to find another path!

Device Compatibility

In addition to desktop devices, it also supports mobile devices. If you are using a touch screen device, you can drag the pointer to turn. Of course, you can also drag and drop the desktop device.

In addition, if your mobile phone supports it, there will be mechanics feedback when you click or drag the pointer. This detail also imitates the experience on the mobile phone.

Use

The code is as follows:

Copy code

<! -- Bootstrap stylesheet and scripts -->   <! -- ClockPicker Stylesheet and script --> <Link rel = "stylesheet" type = "text/css" href = "dist/bootstrap-clockpicker.min.css"> <Script type = "text/javascript" src = "dist/bootstrap-clockpicker.min.js"> </script>   <! -- Input group, just add class 'clockpicker', and optional data-* --> <Div class = "input-group clockpicker" data-placement = "right" data-align = "top" data-autoclose = "true"> <Input type = "text" class = "form-control" value = "09:32"> <Span class = "input-group-addon"> <Span class = "glyphicon-time"> </span> </Span> </Div>   <! -- Or just a input --> <Input id = "demo-input"/>   <Script type = "text/javascript"> $ ('. Clockpicker'). clockpicker () . Find ('input'). change (function (){ // TODO: time changed Console. log (this. value ); });   $ ('# Demo-input'). clockpicker ({ Autoclose: true }); </Script>

For non-Bootstrap projects, simply use the jquery-* file (replace bootstrap.

选项参数

名称	Default	说明
default	”	默认时间，如 ’13:14′
placement	‘bottom’	弹层位置
align	‘left’	弹层箭头对齐
donetext	‘完成’	完成按钮文字
autoclose	false	选定分钟后自动关闭
vibrate	true	拖动指针时小震一下手机