[jQuery筆記] 時間日期外掛：timepicker | jQuery Plugins

之前因為需要使用到日期函式，就找到一個 jQuery 的 plugin：[jQuery筆記] 好用的日期函式 datepicker，然後現在又需要用到時間的外掛，因為 datepicker 只有日期，我需要使用到時間部份，24小時幾分幾秒之類的，所以又去找到了 jQuery plugin 裡面的 timepicker，官方提供的這個外掛，我用起來不能使用，一直給我吐錯誤訊息給我，所以我也裝不起來，後來解決方法，就是去找別人改寫好的 timepicker 來用，所以我覺得還蠻奇怪的，為啥官網提供的外掛不能使用，Orz。 然而我是去網路上再去找有人另外寫好的，底下是他的版權： 
/*
 * Copyright (c) 2006 Sam Collett (http://www.texotela.co.uk)
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/*
 * A time picker for jQuery
 * Based on original timePicker by Sam Collet (http://www.texotela.co.uk)
 * @name     timePicker
 * @version  0.1 
 * @author   Anders Fajerson (http://perifer.se)
 * @example  $("#mytime").timePicker();
 * @example  $("#mytime").timePicker({step:30, startTime:"15:00", endTime:"18:00"}); 
 */
他的使用方法非常簡單，她還搭配簡單的 css 技術，如果你沒有加上 css 語法的話，你的 js 是不會有動作的，所以請在標投的地方加上以下的css語法 
div.time-picker {
  position: absolute;
  height: 200px;
  width:60px;  /* needed for IE */
  overflow: auto;
  background: #fff;
  border: 1px solid #000;
  z-index: 99;
  margin-top: 1.1em;  
}

div.time-picker-12hours {
  width:90px; /* needed for IE */
}

div.time-picker ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
div.time-picker li {
  padding: 1px;
  cursor: pointer;
}
div.time-picker li.selected {
  background: #316AC5;
  color: #fff;
}
在來就是最基本的語法 
// Default.
$("#time1").timePicker();
這是最簡單的，可以讓你出現下拉式選單 
// 02.00 AM - 03.30 PM, 15 minutes steps.
$("#time2").timePicker({
  startTime:new Date(0, 0, 0, 2, 0, 0),
  endTime:new Date(0, 0, 0, 15, 30, 0),
  show24Hours:false,
  separator:'.',
  step: 15});
設定起始時間跟結束時間，還蠻方便的，然後把24小時機制關掉，使用 AM 跟 PM 
// An example how the two helper functions can be used to achieve 
// advanced functionality.
// - Linking: When changing the first input the second input is updated and the
//   duration is kept.
// - Validation: If the second input has a time earlier than the firs input,
//   an error class is added.

// Use default settings
$("#time3, #time4").timePicker();
    
// Store time used by duration.
var oldTime = $.timePicker("#time3").getTime();

// Keep the duration between the two inputs.
$("#time3").change(function() {
  if ($("#time4").val()) { // Only update when second input has a value.
    // Calculate duration.
    var duration = ($.timePicker("#time4").getTime() - oldTime);
    var time = $.timePicker("#time3").getTime();
    // Calculate and update the time in the second input.
    $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
    oldTime = time;
  }
});
// Validate.
$("#time4").change(function() {
  if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
    $(this).addClass("error");
  }
  else {
    $(this).removeClass("error");
  }
});
});
這裡有兩個功能： 第一：當改變第一個輸入的話，就會自動把第二個輸入改變，至於改變多少，就是依照第一個輸入改變多少，輸入二就會改變多少。 第二：當第二個輸入小於第一個輸入的時候，就會以紅色的標記提醒。 相關參考網站： 作者網站： http://labs.perifer.se/timedatepicker/ http://plugins.jquery.com/project/timepicker http://www.texotela.co.uk/code/jquery/timepicker/

Related View