快速入門：新增 TimePicker (HTML)

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

如果您需要允許使用者在您的應用程式中選取時間 (例如排程會議或提醒)，可以使用 TimePicker；這個功能是適用於 JavaScript 的 Windows Library 的一部分。TimePicker 會顯示三個控制項：一個是小時、一個是分鐘，還有一個是選擇 AM 和 PM。這些控制項能輕鬆的與觸控支援配合使用，而且可以利用許多不同的方法設定樣式和相關的設定。(僅限 Windows)

目標: 示範如何新增 TimePicker。

先決條件

這個主題假設您可以使用 JavaScript 建立基本的 Windows 市集應用程式。如需建立第一個應用程式的指示，請參閱使用 JavaScript 建立您的第一個 Windows 市集應用程式。

完成所需的時間: 15 分鐘.

指示

1. 建立簡單的 TimePicker

您可以使用大部分 WinJS 控制項，透過宣告方式 (做為 <div> 元素的 data-win-control 屬性) 或命令方式 (做為 JavaScript 程式碼區塊中的物件) 建立 TimePicker。為了讓控制項出現，您應該呼叫 WinJS.UI.processAll。如果您使用的是使用 JavaScript 的 Windows 市集應用程式的 Visual Studio 專案範本，啟用事件處理常式就會為您呼叫 WinJS.UI.processAll。

以下是以宣告方式建立 TimePicker 的方法：

<!DOCTYPE html>
<html>
<head>
  <title>TimePicker Control Example</title>  
  <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
  <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
  <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    <body>
        <section>
            <h1> TimePicker Example</h1>
                <h3>Add a TimePicker Declaratively</h3>
                <div id="time" data-win-control="WinJS.UI.TimePicker"></div>
                <script type="text/javascript">
                    WinJS.UI.processAll(document.getElementById("time"));
                </script>
        </section>
    </body>
    
</html>

若要以命令方式 (在程式碼中) 建立 TimePicker，請執行下列動作：

<!DOCTYPE html>
<html>
<head>
  <title>TimePicker Control Example</title>  
  <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
  <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
  <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
   <body>
        <section>
            <h1> TimePicker Example</h1>
                <h3>Add a TimePicker Imperatively</h3>
                <div id="time" ></div>
                <script type="text/javascript">
                    var timeDiv = document.getElementById("time"); 
                    var timePicker = new WinJS.UI.TimePicker(timeDiv);
                </script>
        </section>
    </body>
</html>

當您建置及執行您的解決方案時，會看到顯示目前時間的三個控制項，一個是小時、一個是分鐘，還有一個是 AM 或 PM。

這是 TimePicker 使用 ui-dark.css 檔案時的外觀： TimePicker 深色樣式

這是 TimePicker 使用 ui-light.css 檔案時的外觀： TimePicker 淺色樣式

2. 變更預設時間

您可以用下列方式設定預設時間：

以宣告方式

<div data-win-control="WinJS.UI.TimePicker" data-win-options="{current='11:00:00'}"></div>

以命令方式

// "time" is the ID of the <div> element
var timeDiv = document.getElementById("time"); 
var timePicker = new WinJS.UI.TimePicker(timeDiv, {current:'11:00:00'});

您可以使用 JavaScript Date 物件允許的所有方式 (除了 UTC 值以外) 格式化時間字串。以下是一些範例：

03:20 pm
15:20:00

3. 指定分鐘增量

您可以變更 TimePicker 的分鐘控制項中顯示分鐘的方式，方法是設定 minuteIncrement 屬性。例如，下列程式碼會將分鐘控制項設為以 5 的倍數顯示分鐘數。

<div data-win-control="WinJS.UI.TimePicker" data-win-options="{minuteIncrement:5}"></div>

4. 變更分鐘和小時的顯示方式

您可以變更分鐘和小時的模式。根據預設，TimePicker 會以 en-us 地區設定顯示 2 位數的小時、2 位數的分鐘，以及 AM/PM 指示項。您可以使用以下方法進行變更。

變更分鐘顯示方式

var timePicker = WinJS.UI.TimePicker(timeDiv);

//does not display leading zeros
timePicker.minutePattern = "{minute.integer(1)}";

變更小時顯示方式


var timePicker = WinJS.UI.TimePicker(timeDiv);

//does not display leading zeros
timePicker.hourPattern = "{hour.integer(1)}";

指定 12 小時制或 24 小時制

var timePicker = WinJS.UI.TimePicker(timeDiv);

//displays a 24-hour clock
timePicker.clock = "24HourClock";

//displays a 12-hour clock, plus "AM" or "PM"
timePicker.clock = "12HourClock";

下列清單提供您可在 TimePicker 中使用的模式可能值：

{minute.integer} | {minute.integer(n)}
{hour.integer} | {hour.integer(n)}

5. 停用 TimePicker

您可以將 TimePicker 的 disabled 屬性設為 true，將它停用。因此，可以看見這個控制項，但是會變暗，而且使用者無法使用。

var timePicker = new WinJS.UI.TimePicker(timeDiv);
timePicker.disabled = true;

6. 回應 onchange 事件

您可以使用 change 事件修改應用程式中的行為：

timePicker.onchange = hourChangeHandler; 

function hourChangeHandler(event) {
    // Insert code here.
    }

7. 變更 TimePicker 的外觀

一般而言，您可以使用 CSS 樣式來變更 TimePicker 的外觀。

<style id="text/css">
    [class="win-timepicker"] {background-color:LightBlue; }
</style>

並使用下列其中一個 CSS 類別來指定 TimePicker 下拉清單：

win-timepicker
win-timepicker-hour
win-timepicker-minute
win-timepicker-ampm

例如，您可以變更小時下拉清單的邊框色彩：

.win-timepicker-hour
{
    border: 3px solid rgb(28, 160, 218);
}

這樣會讓小時下拉清單的邊框變成藍色： TimePicker 小時藍色邊框

您可以變更時段 (AM/PM) 下拉清單的邊框色彩：

.win-timepicker-period
{
    border: 3px solid rgb(28, 160, 218);;
}

這樣會讓時段下拉清單的邊框變成藍色： TimePicker 時段的邊框變成藍色

您可以使用 CSS 屬性選取器前置語法 (^=) 指定這三個 TimePicker 下拉清單；該前置語法會尋找名稱開頭為指定字串的每個屬性：

[class^="win-timepicker"] { color:red; }

8. 顯示及隱藏控制項

您可以指定是否顯示特定的控制項，方法是將其顯示屬性設為 none：

.win-timepicker-minute { display:none; }

如果您只想要隱藏 TimePicker 的一個執行個體中的控制項，必須參考相關 <div> 元素的識別碼。例如，如果只要隱藏識別碼為 "time" 的 <div> 元素中顯示的 TimePicker 的分鐘，請執行下列動作：

#time *.win-timepicker-minute { display: none; }

9. 以垂直方向顯示 TimePicker 控制項

如果您想要以垂直方向顯示小時、分鐘和 AM/PM 控制項，而不要以水平方向顯示的話，必須在控制項上設定 CSS 屬性 display。您也必須設定 display，在 DIV 上加以封鎖。


#time {display:block;}
*[class^="win-timepicker"] { display: block; }

您可以有條件地以垂直方向顯示控制項，例如當畫面寬度低於指定限制時。以下 CSS 媒體查詢會指定控制項應該以垂直顯示最高 320 個像素的所有寬度。

@media all and (max-width:320px) {
#time {display:block;}
*[class^="win-timepicker"] { display: block; }
}

10. 使用虛擬類別為 TimePicker 設定樣式

TimePicker 支援的下列虛擬類別可讓您當成選取器，在 TimePicker 處於特定狀態時顯示特定樣式。

win-timepicker:hover。使用者將游標放在選擇器上但並未按一下予以啟用。以下是滑鼠暫留在小時下拉清單上的樣子。
win-timepicker:active。在使用者按控制項以開啟下拉清單之後到選擇選項之前，選擇器都會處於使用中狀態。
win-timepicker:focus。醒目提示選擇器以接受鍵盤輸入。
win-timepicker:disabled。選擇器無法接受使用者互動。選擇器的 disabled 屬性必須針對這個虛擬類別設為 true。