Schnellstart: Hinzufügen eines DatePicker-Steuerelements (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 eines Datums in Ihrer App ermöglichen möchten, um z. B. ein Treffen zu planen oder das Ablaufdatum einer Kreditkarte einzugeben, können Sie ein DatePicker-Steuerelement verwenden. Dieses ist Teil der Windows-Bibliothek für JavaScript. Das DatePicker-Steuerelement zeigt drei Steuerelemente für den Tag, den Monat und das Jahr an. 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: Veranschaulichen der Verwendung eines DatePicker-Steuerelements

Voraussetzungen

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

Anweisungen

1. Erstellen eines einfachen DatePicker-Steuerelements

Wie bei den meisten WinJS-Steuerelementen können Sie auch ein DatePicker-Steuerelement deklarativ (als data-win-control-Attribut in einem <div>-Element) oder imperativ (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 deklarieren Sie ein DatePicker-Steuerelement deklarativ:

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

So erstellen Sie ein DatePicker-Steuerelement in Code:

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

Wenn Sie Ihre Lösung erstellen und ausführen, wird ein Steuerelement angezeigt, in dem in der Standardeinstellung das aktuelle Datum steht und das drei Dropdowns für Tag, Monat und Jahr enthält.

Wenn Sie die Datei "ui-dark.css" verwenden, sollte der "DatePicker" so aussehen: "DatePicker" im dunklen Stil

Wenn Sie die Datei "ui-light.css" verwenden, sollte der "DatePicker" so aussehen: "DatePicker" im hellen Stil

2. Ändern des Standarddatums

Sie können deklarativ ein anderes Standarddatum festlegen:

<div data-win-control="WinJS.UI.DatePicker" data-win-options="{current:'2/20/2011'}"></div>

Sie können das Standarddatum auch im Code festlegen:

// "date" is the id of the <div> element
var dateDiv = document.getElementById("date") 
var datePicker = new WinJS.UI.DatePicker(dateDiv, {current: '2/20/2011'});

Sie können die Datumszeichenfolge auf alle Arten formatieren, die in JavaScript für Date-Objekte erlaubt sind. Hier sind einige Beispiele:

'February 20, 2011'
'02/20/2011'
'Sunday, February 20, 2011'

Wichtig Sie können alle Kalender in diesem Release verwenden.

3. Festlegen anderer frühester und spätester Datumsangaben

In der Standardeinstellung ist das früheste Jahr, das Benutzer auswählen können, das aktuelle Jahr minus 100. Das späteste Jahr für die Benutzerauswahl ist das aktuelle Jahr plus 100. Wenn Sie das früheste Jahr auf 1900 und das späteste auf 2300 festlegen möchten, gehen Sie wie folgt vor:

Deklarativ

<div data-win-control="WinJS.UI.DatePicker" data-win-options="{minYear: 1900, maxYear: 2300}"></div>

Im Code

var datePicker = new WinJS.UI.DatePicker(dateDiv);
datePicker.minYear= 1900;
datePicker.maxYear = 2300;

4. Ändern des Musters für Tag, Monat oder Jahr

Sie können das Muster für Tag, Monat oder Jahr ändern. Im DatePicker-Steuerelement werden beim Gebietsschema de-de standardmäßig der Tag und der Monat als 2-stellige Zahl und das Jahr als vierstellige Zahl angezeigt. Dies kann wie folgt geändert werden.

So ändern Sie die Anzeige des Monats


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

So ändern Sie die Anzeige des Tages


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

So ändern Sie die Anzeige des Jahres


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//diplay the year with only two digits
 datePicker.yearPattern = "{year.abbreviated}";

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

{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. Ändern des Kalenders

Sie können ändern, welchen Kalender das DatePicker-Steuerelement verwendet.

Ändern Sie den Kalender in einen der folgenden Werte:
- "GregorianCalendar"
- "HijriCalendar"
- "HebrewCalendar"
- "JapaneseCalendar"
- "KoreanCalendar"
- "ThaiCalendar"
- "TaiwanCalendar"
- "UmAlQuraCalendar"
- "JulianCalendar"
```
datePicker.calendar = "ThaiCalendar";
```

6. Deaktivieren eines DatePicker-Steuerelements

Sie können ein DatePicker-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.

datePicker.disabled = true;

7. Reagieren auf Änderungsereignisse

Sie können das Verhalten Ihrer App anpassen, indem Sie das change-Ereignis behandeln. Dieses Ereignis wird ausgelöst, wenn der Benutzer ein Datum ändert, aber nicht, wenn das Datum programmgesteuert geändert wird.


datePicker.onchange = dateChangeHandler;

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

8. Ändern der Darstellung eines DatePicker-Steuerelements

Im Allgemeinen können Sie die Darstellung eines "DatePickers" mit CSS-Formatvorlagen ändern. Sie können die Formatvorlagen border-color und background-color verwenden, damit sich der "DatePicker" hervorhebt.

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

Sie können bestimmte Komponenten eines "DatePicker"-Steuerelements angeben, indem Sie die folgenden CSS-Klassen verwenden:

win-datepicker
win-datepicker-date
win-datepicker-month
win-datepicker-year

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


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

Das Dropdown für das Datum wird dann mit einem blauen Rahmen angezeigt (mit der Datei "ui-light.css"): Ein gestaltetes DatePicker-Steuerelement

Alle drei "DatePicker"-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-datepicker"] {border:red; }

9. Ein- und Ausblenden von Steuerelementen

Sie können angeben, ob der Tag und/oder das Jahr angezeigt werden, indem Sie das display-Attribut des entsprechenden Dropdowns auf none festlegen:

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

Wenn Sie ein Dropdown nur für eine Instanz eines "DatePicker"-Steuerelements ausblenden möchten, geben Sie die ID des <div>-Elements an. Wenn Sie also z. B. das Datum nur bei dem im <div>-Element angezeigten "DatePicker"-Steuerelement mit der ID "date" ausblenden möchten, gehen Sie wie folgt vor:

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

10. Vertikales Anzeigen der DatePicker-Dropdowns

Wenn Sie die Dropdowns für Tag, Monat und Jahr 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 das DIV selbst besteht.


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

Sie können die Dropdowns auch anhand bestimmter Bedingungen vertikal anzeigen lassen, z. B. wenn die Breite des Bildschirms ein bestimmtes Limit unterschreitet. 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) {
#date {display:block;}
*[class^="win-datepicker"] { display: block; }
}

11. Verwenden unterschiedlicher Stile für verschiedene DatePicker-Instanzen

Sie können für eine bestimmte DatePicker-Instanz einen speziellen Stil verwenden, indem Sie das <div>-Element der Instanz angeben. Wenn also z. B. ein <div>-Element mit der ID "start-date" ein DatePicker-Steuerelement und ein anderes <div>-Element mit der ID "end-date" ein weiteres enthält, können Sie folgendermaßen unterschiedliche Farben für die Schrift von Anfangs- und Enddatum festlegen:

#start-date [class^="win-datepicker"] { color:red; }
#end-date [class^="win-datepicker"] { color:blue; }

12. Verwenden von Pseudoklassen zum Formatieren des "DatePickers"

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

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

Zusammenfassung

Sie haben in diesem Thema erfahren, wie Sie ein DatePicker-Steuerelement erstellen.

Share via