Краткое руководство: добавление элемента управления TimePicker (HTML)

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Если вы хотите разрешить пользователям выбирать время в приложении, чтобы, например, запланировать собрание или установить напоминание, можно использовать элемент TimePicker, который входит в библиотеку Windows для JavaScript. TimePicker отображает три элемента управления: один для часов, второй для минут, а третий для выбора времени до или после полудня (AM или PM). Эти элементы управления легко использовать с поддержкой сенсорного ввода. Их параметры и стиль можно настраивать различными способами. (Только для Windows)

Цель: Демонстрация добавления элемента TimePicker.

Необходимые условия

Предполагается, что вы умеете создавать простые приложения Магазина Windows на JavaScript. Рекомендации по созданию первого приложения см. в разделе Создание первого приложения Магазина Windows на JavaScript.

Время для завершения: 15 мин.

Инструкции

1. Создание простого элемента TimePicker

Как и большинство элементов управления WinJS, элемент управления TimePicker можно создать декларативно (как атрибут data-win-control элемента <div>) или императивно (как объект в блоке кода JavaScript). Чтобы элемент управления отобразился, необходимо вызвать метод WinJS.UI.processAll. Если вы используете шаблоны проектов Visual Studio для приложений Магазина Windows на JavaScript, реализацию этой функции вы можете найти в обработчике активированных событий.

Декларативное создание элемента 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. Например, следующий код обновляет отображение времени с пятиминутным интервалом.

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

4. Изменение способа отображения часов и минут

Можно изменить шаблон представления часов и минут. По умолчанию элемент TimePicker отображает часы и минуты двухзначными числами, а указатель 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. Реакция на событие изменения

Чтобы изменять поведение в вашем приложении, вы можете использовать событие change:

timePicker.onchange = hourChangeHandler; 

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

7. Изменение оформления элемента TimePicker

В основном менять внешний вид элемента управления TimePicker можно с помощью стилей CSS

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

и описывая раскрывающееся меню TimePicker посредством следующих классов CSS:

  • 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 с синей границей

Можно указать все три раскрывающихся меню элемента TimePicker с помощью приставки (^=) селектора атрибута CSS, которая находит все атрибуты с именами, начинающимися с указанной строки:

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

8. Отображение и скрытие элементов управления

Вы можете указать, следует ли отображать элемент, присвоив его атрибуту display значение none:

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

Если вы хотите скрыть элемент только в одном экземпляре TimePicker, необходимо сослаться на него, указав ID соответствующего элемента <div>. Например, чтобы скрыть минуты только в TimePicker, отображаемом в элементе <div> с ID "time", выполните следующее:

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

9. Вертикальное отображение элементов TimePicker

Чтобы часы, минуты и указатель половины суток (AM/PM) отображались вертикально, а не горизонтально, нужно установить атрибут CSS display этих элементов. Нужно также присвоить атрибуту display значение block в самом элементе 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.