十二、使用TimePicker和DatePicker和Flyout
在这一章中，我继续探索 WinJS UI 控件，重点是TimePicker、DatePicker、Flyout和Menu控件。TimePicker和DatePicker控件允许用户指定时间和日期，顾名思义。这些是带有一些设计问题的基本控件，这些设计问题使它们比它们本应具有的功能更难使用(也更没用)。你已经在第 7 章的中看到了Flyout控件，在那里我将它与 AppBar 一起使用。作为一个通用控件，T7 有着更广泛的存在，我解释了在这种情况下使用它所需要知道的一切。表 12-1 提供了本章的总结。
使用时间选择器控件
WinJS.UI.TimePicker控件允许用户选择时间。HTML5 在input元素中增加了支持时间和日期输入的功能，但是在 Internet Explorer 10 中不支持，你必须使用TimePicker和DatePicker控件来代替(我将在本章后面描述DatePicker)。你可以在图 12-1 的中看到TimePicker控件是如何显示给用户的。
图 12-1。时间选择器控制和支持配置设置
何时使用时间选择器控件
当您需要用户指定一天中的时间时，您应该使用TimePicker控件。TImePicker控件尊重用户机器的语言环境设置，因此使用本地化的时间首选项捕获时间——尽管，正如您将看到的，这并不完全成功。
控件的质量没有我希望的那么好。众所周知，本地化的时间和日期首选项很难得到正确，必须做出一些让步，但即使如此，在TimePicker中反映出的不幸的设计选择使它的用处大大降低。我对这个控件和它的同伴DatePicker的总体印象是，这是一个仓促的工作，很少考虑控件将如何使用。
演示时间选择器控件
按照上一章的模式，我在第十章的中开始的 Visual Studio 项目的pages文件夹中添加了一个名为TimePicker.html的文件。您可以在清单 12-1 中看到该文件的内容。
清单 12-1 。TimePicker.html 文件的内容
<!DOCTYPE html>
<html>
<head> `
var proxyObject = WinJS.Binding.as({ showPeriod: true, clock: false, hourLength: 2, minuteLength: 2, });
Templates.createControls(rightPanel, picker, "timePicker", proxyObject) .then(function () {
proxyObject.bind("showPeriod", function (val) { $('.win-timepicker-period').setStyle("display", val ? "block" : "none"); });
proxyObject.bind("clock", function (val) { picker.winControl.clock = val ? "24HourClock" : "12HourClock"; });
["hour", "minute"].forEach(function (item) { proxyObject.bind(item + "Length", function (val) { picker.winControl[item + "Pattern"] = "{" + item + ".integer(" + val + ")}"; }); }); }); } });
Enter a time:
<**div id="picker" data-win-control="WinJS.UI.TimePicker"** **data-win-options="{minuteIncrement: 10}">** **版权属于：月萌API www.moonapi.com，转载请注明出处
