快速入門：新增 DatePicker (HTML)

發行項
03/04/2016

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

如果您需要允許使用者在您的應用程式中設定日期 (例如排程約會或設定信用卡的到期日)，可以使用 DatePicker；這個功能是適用於 JavaScript 的 Windows Library 的一部分。DatePicker 會顯示月份、日期及年份三個控制項。這些控制項能輕鬆的與觸控支援配合使用，而且可以利用許多不同的方法設定樣式和相關的設定。(僅限 Windows)

目標: 示範如何使用 DatePicker。

先決條件

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

指示

1. 建立簡單的 DatePicker

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

以下是宣告 DatePicker 的方法：

<!DOCTYPE html>
<html>
<head>
  <title>DatePicker 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>
</head>
 <body>
     <section>
         <h1> DatePicker Example</h1>
             <h3>Add a DatePicker Declaratively</h3>
             <div id="date" data-win-control="WinJS.UI.DatePicker"></div>
             <script type="text/javascript">
                 WinJS.UI.processAll();
             </script>
     </section>
 </body>
 
</html>

以下是以程式碼建立 DatePicker 的方法：

<!DOCTYPE html>
<html>
<head>
<head>
  <title>DatePicker 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>
  </head>
    <body>      
        <section>
            <h1> DatePicker Example</h1>
                <h3>Add a DatePicker Imperatively</h3>
            <div id="date"></div>
            <script type="text/javascript">
               var dateDiv = document.getElementById("date");
               var datePicker = new WinJS.UI.DatePicker(dateDiv);
            </script>
        </section>
    </body>
</html>

當您建置及執行您的解決方案時，會看到預設顯示目前日期的控制項，其中包含月份、日期和年份的三個下拉清單。

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

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

2. 變更預設日期

您可以用宣告的方式設定不同的預設日期：

<div data-win-control="WinJS.UI.DatePicker" data-win-options="{current:'2/20/2011'}"></div>

您也可以在程式碼中設定預設日期：

// "date" is the id of the <div> element
var dateDiv = document.getElementById("date") 
var datePicker = new WinJS.UI.DatePicker(dateDiv, {current: '2/20/2011'});

您可以使用 JavaScript Date 物件允許的所有方式格式化日期字串。以下是一些範例：

'February 20, 2011'
'02/20/2011'
'Sunday, February 20, 2011'

重要事項 在這個版本中，您可以使用任何行事曆。

3. 指定不同的最小及最大日期

根據預設，使用者可以選取的最早年份是目前年份減 100，而使用者可以選取的最晚年份則是目前年份加 100。若要將最早年份變更為 1900 而最晚年份為 2300，可以執行下列動作：

以宣告方式

<div data-win-control="WinJS.UI.DatePicker" data-win-options="{minYear: 1900, maxYear: 2300}"></div>

在程式碼中

var datePicker = new WinJS.UI.DatePicker(dateDiv);
datePicker.minYear= 1900;
datePicker.maxYear = 2300;

4. 變更日期、月份或年份模式

您可以變更日期、月份或年份的模式。根據預設，DatePicker 會以 en-us 地區設定顯示月份完整名稱、2 位數日期，以及 4 位數年份。您可以使用以下方法進行變更。

變更月份顯示方式


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//change the month to an integer
datePicker.monthPattern = "{month.integer}"; 

//change the month to an abbreviation
datePicker.monthPattern = "{month.abbreviated}";

變更日期顯示方式


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//display the day without leading zeros
datePicker.datePattern = "{day.integer(1)}";

//display the day of the week along with the date
datePicker.datePattern = 
    "{day.integer(2)} ({dayofweek.abbreviated})";

變更年份顯示方式


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//diplay the year with only two digits
 datePicker.yearPattern = "{year.abbreviated}";

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

{day.integer} | day.integer(n)}
{dayofweek.full} | {dayofweek.abbreviated} | {dayofweek.abbreviated(n)}
{dayofweek.solo.full} | {dayofweek.solo.abbreviated} | {dayofweek.solo.abbreviated(n)}
{month.full} | {month.abbreviated} | {month.abbreviated(n)}
{month.solo.full} | {month.solo.abbreviated} | {month.solo.abbreviated(n)}
{month.integer} | {month.integer(n)}
{year.full} | {year.full(n)} | {year.abbreviated} | {year.abbreviated(n)}
{era.abbreviated} | {era.abbreviated(n)}

5. 變更行事曆

您可以變更 DatePicker 使用的行事曆。

將行事曆變更成下列其中一個值：
- "GregorianCalendar"
- "HijriCalendar"
- "HebrewCalendar"
- "JapaneseCalendar"
- "KoreanCalendar"
- "ThaiCalendar"
- "TaiwanCalendar"
- "UmAlQuraCalendar"
- "JulianCalendar"
```
datePicker.calendar = "ThaiCalendar";
```

6. 停用 DatePicker

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

datePicker.disabled = true;

7. 回應變更事件

您可以藉由處理 change 事件來修改應用程式中的行為。當使用者變更日期時，會引發此事件；但透過程式設計方式變更日期時，則不會引發此事件。


datePicker.onchange = dateChangeHandler;

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

8. 變更 DatePicker 的外觀

一般而言，您可以使用 CSS 樣式來變更 DatePicker 的外觀。您可以使用 border-color 及 background-color 樣式讓 DatePicker 更顯眼。

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

您可以使用下列 CSS 類別來指定 DatePicker 控制項的特定部分：

win-datepicker
win-datepicker-date
win-datepicker-month
win-datepicker-year

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


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

這樣會讓日期下拉清單的邊框變成藍色 (使用 ui-light.css 檔案)：已設定樣式的 DatePicker

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

[class^="win-datepicker"] {border:red; }

9. 顯示及隱藏控制項

您可以將特定下拉清單的 display 屬性設為 none，以指定是否顯示日和/或年：

.win-datepicker-year { display:none; }

如果您只想要隱藏 DatePicker 的一個執行個體的下拉清單，必須指定 <div> 元素的識別碼。例如，如果您只想要針對具有 "date" 識別碼的 <div> 元素中所顯示的 DatePicker 隱藏日期，請執行下列動作：

#date *.win-datepicker-date { display: none; }

10. 以垂直方向顯示 DatePicker 下拉清單

如果您想要以垂直方向顯示月份、日期和年份，而不要以水平方向顯示的話，可以在下拉清單上設定 CSS 屬性 display。您也必須設定 display，在 DIV 上加以封鎖。


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

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

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

11. 針對不同 DatePicker 執行個體使用不同樣式

您可以針對特定的 DatePicker 執行個體使用不同樣式，方法是指定與該執行個體相關聯的 <div> 元素。例如，如果在具有 "start-date" 識別碼的 <div> 中有一個 DatePicker，在具有 "end-date" 識別碼的 <div> 中有另一個 DatePicker，則可以為開始日期和結束日期的 DatePicker 設定不同的字型色彩，如下所示：

#start-date [class^="win-datepicker"] { color:red; }
#end-date [class^="win-datepicker"] { color:blue; }

12. 使用虛擬類別為 DatePicker 設定樣式

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

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

摘要

在這個主題中，您已學會如何建立 DatePicker。

共用方式為