通过

快速入门：添加 TimePicker (HTML)

  • 项目

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

如果你需要允许用户在你的应用中选择时间（例如，安排会议或发出提醒），则可以使用 TimePicker，它是适用于 Windows JavaScript 库的一部分。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 项目模板，则调用操作是在 activated 事件处理程序中完成的。

下面介绍了如何以声明方式声明 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。

以下是使用 ui-dark.css 文件，TimePicker 应显示的外观：TimePicker 深色样式

以下是使用 ui-light.css 文件，TimePicker 应显示的外观：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. 指定分钟增量

可以通过设置 minuteIncrement 属性来更改 TimePicker 的分钟控件中显示分钟的方式。例如，下面的代码导致分钟控件以 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 来禁用 TimePicker。因此，控件是可见的，但是亮度变暗，而且用户无法可用。

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. 显示和隐藏控件

你可以通过将特定控件的 display 属性设置为 none 来指定是否显示该控件：

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

如果你只希望针对一个 TimePicker 实例来隐藏控件，则必须引用相关 <div> 元素的 ID。例如，如果你只希望针对 ID 为“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。用户将光标放在选取器上，但通过单击无法激活它。以下是鼠标悬停在小时下拉控件上。DatePicker 带鼠标悬停

  • win-timepicker:active。在用户按下该控件打开下拉菜单而尚未选择一个选项时，选取器处于活动状态。DatePicker 处于活动状态

  • win-timepicker:focus。选取器已突出显示以接受键盘输入。DatePicker 突出显示

  • win-timepicker:disabled。选取器不能接受用户交互。 对于此伪类，选取器的 disabled 属性必须设置为 true。DatePicker 已禁用

摘要

在本主题中，你学习了如何创建 TimePicker。