Schnellstart: Hinzufügen von TimePicker-Steuerelementen (HTML)

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Wenn Sie Benutzern das Festlegen einer Uhrzeit in Ihrer App ermöglichen möchten, um z. B. ein Treffen oder eine Erinnerung zu planen, können Sie ein TimePicker-Steuerelement verwenden. Dieses ist Teil der Windows-Bibliothek für JavaScript. Das TimePicker-Steuerelement zeigt drei Steuerelemente an: eines für die Stunde, eines für die Minuten und eines für die Auswahl zwischen AM und PM. Diese Steuerelemente sind aufgrund ihrer Fingereingabeunterstützung äußerst benutzerfreundlich, und es gibt eine Vielzahl verschiedener Möglichkeiten, sie zu konfigurieren und Stile für sie festzulegen. (Nur Windows)

Ziel: Erfahren Sie, wie ein TimePicker-Steuerelement hinzugefügt wird.

Voraussetzungen

In diesem Thema wird davon ausgegangen, dass Sie eine einfache Windows Store-App mit JavaScript erstellen können. Anweisungen zum Erstellen Ihrer ersten App finden Sie unter Erstellen Ihrer ersten Windows Store-App mit JavaScript.

Zeitaufwand: 15 Minuten.

Anweisungen

1. Erstellen eines einfachen TimePicker-Steuerelements

Wie bei den meisten WinJS-Steuerelementen können Sie auch ein TimePicker-Steuerelement deklarativ (als data-win-control-Attribut in einem <div>-Element) oder imperativ (als Objekt in einem JavaScript-Codeblock) erstellen. Damit das Steuerelement angezeigt wird, sollten Sie WinJS.UI.processAll aufrufen. Wenn Sie Visual Studio-Projektvorlagen für Windows Store-Apps mit JavaScript verwenden, geschieht dies automatisch im activated-Ereignishandler.

So erstellen Sie ein TimePicker-Steuerelement deklarativ:

<!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>

Gehen Sie zum imperativen Erstellen (im Code) eines TimePicker-Steuerelements wie folgt vor:

<!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>

Nach dem Erstellen und Ausführen Ihrer Lösung wird die aktuelle Uhrzeit in drei Steuerelementen angezeigt: einem für die Stunde, einem für die Minuten und einem für die Anzeige von AM oder PM.

So sollte der "TimePicker" aussehen, wenn Sie die Datei "ui-dark.css" verwenden: "TimePicker" im dunklen Stil

So sollte der "TimePicker" aussehen, wenn Sie die Datei "ui-light.css" verwenden: "TimePicker" im hellen Stil

2. Ändern der Standarduhrzeit

Sie können eine Standarduhrzeit wie folgt festlegen:

Deklarativ

<div data-win-control="WinJS.UI.TimePicker" data-win-options="{current='11:00:00'}"></div>

Imperativ

// "time" is the ID of the <div> element
var timeDiv = document.getElementById("time"); 
var timePicker = new WinJS.UI.TimePicker(timeDiv, {current:'11:00:00'});

Sie können die Uhrzeitzeichenfolge auf alle Arten formatieren, die in JavaScript für Date-Objekte erlaubt sind – mit Ausnahme von UTC-Werten. Hier sind einige Beispiele:

03:20 pm
15:20:00

3. Festlegen der Minutenschritte

Sie können die Anzeige der Minuten im Minuten-Steuerelement eines TimePicker-Steuerelements ändern, indem Sie die minuteIncrement-Eigenschaft festlegen. Der folgende Code zeigt die Minuten im Minuten-Steuerelement z. B. als Vielfaches von 5 an.

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

4. Ändern der Darstellung von Minuten und Stunden

Sie können das Muster für Minuten und Stunden ändern. In der Standardeinstellung zeigt das TimePicker-Steuerelement die Stunden und Minuten mit 2 Stellen an und das AM/PM-Kennzeichen im Gebietsschema "en-us". Dies kann wie folgt geändert werden.

So ändern Sie die Anzeige der Minuten

var timePicker = WinJS.UI.TimePicker(timeDiv);

//does not display leading zeros
timePicker.minutePattern = "{minute.integer(1)}";

So ändern Sie die Anzeige der Stunden


var timePicker = WinJS.UI.TimePicker(timeDiv);

//does not display leading zeros
timePicker.hourPattern = "{hour.integer(1)}";

So zeigen Sie 12 oder 24 Stunden an

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";

Die folgende Liste enthält die möglichen Werte für die Muster in einem TimePicker-Steuerelement:

{minute.integer} | {minute.integer(n)}
{hour.integer} | {hour.integer(n)}

5. Deaktivieren eines TimePicker-Steuerelements

Sie können ein TimePicker-Steuerelement deaktivieren, indem Sie seine disabled-Eigenschaft auf true festlegen. Das Steuerelement ist damit sichtbar, jedoch abgeblendet dargestellt und für den Benutzer nicht verfügbar.

var timePicker = new WinJS.UI.TimePicker(timeDiv);
timePicker.disabled = true;

6. Reagieren auf Änderungsereignisse

Sie können mit dem change-Ereignis das Verhalten Ihrer App ändern:

timePicker.onchange = hourChangeHandler; 

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

7. Ändern der Darstellung eines TimePicker-Steuerelements

Im Allgemeinen können Sie die Darstellung eines "TimePickers" mit CSS-Formatvorlagen ändern.

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

Außerdem können Sie mit einer der folgenden CSS-Klassen ein "TimePicker"-Dropdown angeben:

win-timepicker
win-timepicker-hour
win-timepicker-minute
win-timepicker-ampm

Beispielsweise können Sie die Rahmenfarbe des Dropdowns für die Stunde ändern:

.win-timepicker-hour
{
    border: 3px solid rgb(28, 160, 218);
}

Das Dropdown für die Stunde wird dann mit einem blauen Rahmen angezeigt: "TimePicker" mit blauem Rahmen um die Stunde

Sie können die Rahmenfarbe des Dropdowns für den Zeitraum (AM/PM) ändern:

.win-timepicker-period
{
    border: 3px solid rgb(28, 160, 218);;
}

Das Dropdown für den Zeitraum wird dann mit einem blauen Rahmen angezeigt: "TimePicker" mit blauem Rahmen um den Zeitraum

Alle drei "TimePicker"-Dropdowns geben Sie mit der Präfixsyntax für die CSS-Attributauswahl (^=) an. Diese findet alle Attribute, deren Namen mit der angegebenen Zeichenfolge beginnen:

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

8. Ein- und Ausblenden von Steuerelementen

Sie können festlegen, ob ein bestimmtes Steuerelement angezeigt wird, indem Sie sein display-Attribut auf none festlegen:

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

Wenn Sie ein Steuerelement nur für eine Instanz eines TimePicker-Steuerelements ausblenden möchten, verweisen Sie auf die ID deszugehörigen <div>-Elements. Möchten Sie z. B. die Minuten nur bei dem im <div>-Element angezeigten TimePicker-Steuerelement mit der ID "time" ausblenden, gehen Sie wie folgt vor:

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

9. Vertikales Darstellen der TimePicker-Steuerelemente

Wenn Sie die Steuerelemente für Stunde, Minute und AM/PM vertikal statt horizontal anzeigen möchten, legen Sie das CSS-Attribut display in den Steuerelementen fest. Sie müssen zudem display so festlegen, dass eine Sperre für DIV selbst besteht.


#time {display:block;}
*[class^="win-timepicker"] { display: block; }

Sie können die Steuerelement auch anhand bestimmter Bedingungen vertikal anzeigen lassen, z. B. wenn die Breite des Bildschirms unter ein bestimmtes Limit fällt. Die folgende CSS-Medienabfrage gibt an, dass die Steuerelemente für alle Breiten bis zu 320 Pixel vertikal angezeigt werden sollen.

@media all and (max-width:320px) {
#time {display:block;}
*[class^="win-timepicker"] { display: block; }
}

10. Verwenden von Pseudoklassen zum Formatieren des "TimePickers"

Der "TimePicker" unterstützt die folgenden Pseudoklassen, die Sie als Auswahlelemente verwenden können, um bestimmte Stile anzuzeigen, wenn sich der "TimePicker" in einem bestimmten Zustand befindet.

win-timepicker:hover. Die Benutzer platzieren den Cursor auf der Auswahl, ohne diese durch Klicken zu aktivieren. Hier zeigt die Maus auf das Dropdown für die Stunde.
win-timepicker:active. Die Auswahl ist aktiv, wenn Benutzer auf das Steuerelement zum Öffnen des Dropdowns gedrückt und noch keine Option ausgewählt haben.
win-timepicker:focus. Die Auswahl ist hervorgehoben, um Tastatureingaben zu anzunehmen.
win-timepicker:disabled. Die Auswahl kann keine Benutzerinteraktionen annehmen. Für diese Pseudoklasse muss die disabled-Eigenschaft der Auswahl auf true festgelegt sein.