iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 26
1
Modern Web

前端UI軍火庫系列 第 26

[Day 26]ClockPicker - 更直覺的時間選擇器

在web app中遇到需要選擇日期、時間需求的時候,日期通常很簡單,大部分的UI元件都可以用表格做出一個簡單的日曆來選擇,而時間通常就比較沒那麼直覺,多半都是用個下拉選單選擇時間,或是直接輸入;而今天要介紹的ClockPicker,則是一個採用更直覺的方式,讓我們能直接在時鐘上選擇時間的酷炫library。

開始使用ClockPicker

ClockPicker相依於bootstrap,不過主要顯示時鐘的部分只相依於.popover.btn的樣式而已,因此ClockPicker的作者也有設計把這些樣式獨立出來只相依於jQuery的版本,可以自行選擇要載入bootstrap-*的版本(相依於jquery與bootstrap)還是jquery-*的版本(只相依於jquery)。

接著我們加入以下的HTML

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="12:34">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>

然後JavaScript只需要一行程式碼:

$('.clockpicker').clockpicker();

就可以看到用時鐘選擇時間的畫面啦,非常簡單吧!

http://ithelp.ithome.com.tw/upload/images/20161226/20020617u0pcCQfpol.png

ClockPicker進階功能

ClockPicker也有許多參數可以選擇,例如時鐘預設是在textbox下面,我們可以透過placement參數來將時鐘移到textbox右邊:

$('.clockpicker').clockpicker({
	placement: 'right'
});

或是透過autoclose參數,讓我們不需要按下時鐘的"完成"按鈕,只要選完時、分就自動完成選擇並關閉時鐘:

$('.clockpicker').clockpicker({
  autoclose: true
});

我們也可以在程式中主動操作ClockPicker,例如按下某個按鈕後顯示時鐘

$('#showClock').click(function(e){
	e.stopPropagation();
	$('.clockpicker').clockpicker('show');
});

程式碼DEMO: https://jsfiddle.net/wellwind/n9LmazpL/

透過ClockPicker,顯示時間是不是更直覺了呢?

類似資源

  • Bootstrap Material DatePicker:搭配了Material Design的樣式,本身就是個完整的日期/時間選擇器,選擇時間的部分雖然也是時鐘,但操作上比ClockPicker難使用一些。

文章同步發表於:https://dotblogs.com.tw/wellwind/2016/12/26/front-end-clock-picker

不正經閒聊

選擇時間也要簡單明瞭,才是前端開發人員應盡的義務XD


上一篇
[Day 25]X-editable - 瀏覽、新增、修改三個願望一次滿足
下一篇
[Day 27]jQuery Knob - 酷炫的旋鈕式數字選擇器
系列文
前端UI軍火庫31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言