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

Статья
03/04/2016

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

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

Цель: Продемонстрируем, как использовать DatePicker.

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

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

Инструкции

1. Создание простого элемента управления DatePicker

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

При использовании файла ui-light.css элемент управления 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. Вот несколько примеров:

'20 февраля, 2011'
'20/02/2011'
'Воскресенье, 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 в русском языковом стандарте отображает полное имя месяца, двузначное значение дня и четырехзначное значение года. Это можно изменить следующими способами.

Изменение способа отображения месяца


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

В общем случае менять внешний вид элемента управления DatePicker можно с помощью стилей CSS. Чтобы выделить свой элемент DatePicker, вы можете использовать стили border-color и background-color.

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

Определить некоторые части элемента управления DatePicker можно посредством следующих классов CSS:

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 с примененным стилем

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

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

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

Если не нужно отображать день и/или год, можно установить для атрибута display раскрывающегося меню значение none:

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

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

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

10. Вертикальное отображение раскрывающихся меню элемента DatePicker

Если нужно отобразить раскрывающиеся меню для дня, месяца и года вертикально, а не горизонтально, можно задать атрибут CSS display соответствующих элементов управления. Также нужно присвоить атрибуту display значение block в самом элементе 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>, связанный с этим экземпляром. Например, если у вас есть DatePicker в <div> с идентификатором "start-date" (начальная дата), а другой — в <div> с идентификатором "end-date" (конечная дата), вы можете следующим образом задать различные цвета шрифта для элементов управления 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.