[jQuery] TimePicker- 時間選擇器 TimePicker, jQuery

wmh

jquery.timepickr (jQuery TimePicker)
http://haineault.com/media/jquery/ui-timepickr/page/
jQuery 時間選擇器

我沒打錯字喔，是 timepickr 沒錯，名字有點學 flickr 的味道。基本上這是一個 jQuery 的時間選擇器，有個特別的 UI，可以只用滑鼠點兩次就可以選好時間了。還記得先前介紹過 othree 寫的 jFormino Birthday 嗎？有著異曲同工之妙喔。

先解釋一下，這個 plugin 目前版本是 0.6a，目前不支援 IE！官方也預計於 0.8 版時支援 IE7，還請 IE 使用者再耐心等待，欲看以下展示的話，請改用其他瀏覽器，目前測試過 Firefox 和 Chrome 都可正常運作。

使用方式

下載 jquery.timepickr 後，將 js 和 css 引用進來。

<link rel="Stylesheet" href="jquery.timepikr.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.timepickr.js"></script>

加上文字輸入框：

<input id="demo-1" type="text" value="06:30" />

接著把這個輸入框套用 timepickr()：

<script type="text/javascript">
$(function() {
  $('#demo-1').timepickr().focus();
});

成果展示

順利的話，應該就可以看到這樣的輸入框囉：






換一個暗色佈景主題

如果網頁是黑色的背景，預設也有個佈景主題可以適用喔。要再加上一個下載包內的 style.css:

<link rel="Stylesheet" href="style.css" />
<input id="demo-2" type="text" value="14:00" class="demo">

至於程式的部份，也是多一行如下所示：

<script type="text/javascript">
$(function() {
  $('#demo-2').timepickr().focus();
  $('#demo-2').next().addClass('dark');
});

效果就像這樣：

測試黑色背景：

總結

• 可以設定分和秒的選項，完整設定方式請參考官方文件
  
• 0.6a minified 的版本 (jquery.timepickr.min.js) 不能用!
  
• 原始版本檔案還蠻大的 (289KB)!
  
• 尚不支援 IE!
  

wing_hk

真的很方便，之前見過一個更小的，就是格式好像 datepicker一樣的界面。

wmh

如果記得網址的話，歡迎分享一下喔