快速入门：添加 DatePicker (HTML)

项目
03/04/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

如果你需要允许用户在你的应用中设置日期（例如，安排约会或设置信用卡的到期日期），则可以使用 DatePicker，它是 Windows JavaScript 库的一部分。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. 更改日期、月份或年份模式

你可以更改日期、月份或年份的模式。默认情况下，在 en-us 区域设置中，DatePicker 显示月份的全名、2 位日期和四位年份。可以按下列方法进行更改。

更改月份的显示方式


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。因此，控件是可见的，但是亮度变暗，而且用户无法可用。

datePicker.disabled = true;

7. 响应 change 事件

可以通过处理 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> 元素的 ID。例如，如果你只希望针对 ID 为“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 实例使用不同的样式

你可以通过指定与该实例相关联的 <div> 元素来针对特定的 DatePicker 实例使用不同的样式。例如，如果在 ID 为“start-date”的 <div> 中有一个 DatePicker，在 ID 为“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。

通过