一個模擬時鍾的時間選擇器 ClockPicker

最近開發的一個模擬時鍾的時間選擇器 ClockPicker，用於 Bootstrap，或者單獨作為一個 jQuery 插件。

源代碼托管在 GitHub 上: ClockPicker

最近項目中需要用到一個時間選擇器，之前用到的 bootstrap-datetimepicker 在選擇日期時蠻好用，但是它的時間選擇（時:分）卻有點別扭，后來發現 Android 上調鬧鈴時的選擇器挺不錯，於是決定自己開發一個類似的模擬時鍾的時間選擇器。

最開始只是打算做一個用於 Bootstrap 的組件，后來發現我只是用了 Bootstrap 的 .popover 和一些 .btn 的樣式，於是我將這些樣式取出來，讓它同時支持單獨作為一個 jQuery 插件。

先看看截圖，使用過 Android 手機的親人們對此應該不陌生：

Demo

試試點擊下面的輸入框（按住指針可以拖動）：

瀏覽器兼容性

支持所有主流瀏覽器，包括 IE 9+ 。理論上在 IE 8 下也能正常運行，除了沒有圓角邊框、指針效果外。不過我沒有仔細測試它在 IE 8 下的表現。

如果你的項目必須兼容 IE 6/7 ，你可能得另辟蹊徑！

設備兼容性

除了桌面設備外，它也能很好的支持移動設備。如果你使用觸摸屏設備，你可以拖動指針轉動。當然，桌面設備也可以按住鼠標進行拖動選擇。

另外，如果你的手機支持，在點選或拖動指針時，會有力學反饋哦。這個細節也是模仿自手機上的體驗。

使用

<!-- 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 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>

對於非 Bootstrap 項目，直接使用 jquery-* 的文件（替換 bootstrap-* ）即可。

選項參數

名稱	默認	說明
default	''	默認時間，如 '13:14'
placement	'bottom'	彈層位置
align	'left'	彈層箭頭對齊
donetext	'完成'	完成按鈕文字
autoclose	false	選定分鍾后自動關閉
vibrate	true	拖動指針時小震一下手機

 

點擊下載項目壓縮包 ，里面的壓縮后的CSS小於6KB，JS則小於9KB。

更多示例可參見： http://weareoutman.github.io/clockpicker/

ClockPicker: Fork me on GitHub

 

這篇文章也發表在我的個人網站上： http://wangshenwei.com/article/clockpicker