Démarrage rapide : ajout d’un contrôle TimePicker (HTML)

Article
03/04/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Pour autoriser les utilisateurs à sélectionner une heure dans votre application, par exemple pour planifier une réunion ou un rappel, vous pouvez utiliser un TimePicker, qui fait partie de la bibliothèque Windows pour JavaScript. Le TimePicker affiche trois contrôles : un pour les heures, un autre pour les minutes et un dernier pour choisir entre AM et PM. Ces contrôles sont simples d’utilisation avec une prise en charge des manipulations tactiles ; ils peuvent être personnalisés et configurés de nombreuses façons. (Windows uniquement)

Objectif: montrer comment ajouter un TimePicker

Prérequis

Cette rubrique part du principe que vous savez créer une application élémentaire du Windows Store en JavaScript. Pour obtenir des instructions sur la création de votre première application, voir Création de votre première application du Windows Store en JavaScript.

Durée de réalisation: 15 minutes.

Instructions

1. Création d’une TimePicker simple

Comme pour la plupart des contrôles WinJS, vous pouvez créer un TimePicker de façon déclarative (en tant qu’attribut data-win-control sur un élément <div>) ou impérative (dans un bloc de code JavaScript). Pour que le contrôle apparaisse, vous devez appeler WinJS.UI.processAll. Si vous utilisez des modèles de projet Visual Studio pour des applications du Windows Store en JavaScript, cette opération est automatiquement effectuée dans le gestionnaire d’événements activé.

Voici comment créer un TimePicker de façon déclarative :

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

Pour créer un TimePicker de façon impérative (dans un code), procédez comme suit :

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

Lorsque vous générez et exécutez votre solution, trois contrôles apparaissent, qui affichent l’heure actuelle : un pour les heures, l’autre pour les minutes et un dernier pour indiquer AM ou PM.

Voici à quoi le TimePicker doit ressembler au moyen du fichier ui-dark.css : Style sombre du contrôle TimePicker

Voici à quoi le TimePicker doit ressembler au moyen du fichier ui-light.css : Style clair du contrôle TimePicker

2. Modification de l’heure par défaut

Vous pouvez définir une heure par défaut des façons suivantes :

De manière déclarative

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

De manière impérative

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

Vous pouvez appliquer à la chaîne d’heure n’importe quelle mise en forme autorisée par l’objet JavaScript Date, sauf pour les valeurs UTC. Voici quelques exemples :

03:20 pm
15:20:00

3. Spécification des incréments en minute

Vous pouvez modifier le mode d’affichage des minutes dans le contrôle des minutes d’un TimePicker en définissant la propriété minuteIncrement. Par exemple, le code suivant amène le contrôle des minutes à afficher les minutes par multiples de 5.

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

4. Modification de l’affichage des minutes et des heures

Vous pouvez modifier le modèle des minutes et des heures. Par défaut, le TimePicker affiche les heures sur 2 chiffres, les minutes sur 2 chiffres et l’indicateur AM/PM dans le paramètre régional en-us. Vous pouvez modifier cela comme expliqué ci-après.

Pour modifier l’affichage des minutes

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

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

Pour modifier l’affichage des heures


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

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

Pour spécifier une horloge de 12 heures ou une horloge de 24 heures

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

La liste suivante indique les valeurs possibles des modèles utilisables dans un TimePicker :

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

5. Désactivation d’un TimePicker

Vous pouvez désactiver un TimePicker en définissant sa propriété disabled sur true. Le nouveau contrôle reste visible, mais il est estompé et inaccessible pour l’utilisateur.

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

6. Réponse à l’événement onchange

Vous pouvez utiliser l’événement change pour modifier le comportement de votre application :

timePicker.onchange = hourChangeHandler; 

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

7. Modification de l’apparence du TimePicker

En général, vous pouvez modifier l’aspect du TimePicker au moyen de styles CSS

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

et en spécifiant un menu déroulant TimePicker au moyen de l’une des classes CSS suivantes :

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

Par exemple, vous pouvez modifier la couleur de bordure du menu déroulant de l’heure :

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

Le menu déroulant de l’heure s’affiche avec une bordure bleue : Bordure bleue pour l’heure du TimePicker

Vous pouvez modifier la couleur de bordure du menu déroulant de la période (AM/PM) :

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

Le menu déroulant de la période s’affiche avec une bordure bleue : La période TimePicker comporte une bordure bleue

Vous pouvez spécifier les trois menus déroulants TimePicker à l’aide de la syntaxe de préfixe de sélecteur d’attribut CSS (^=), qui recherche tous les attributs dont le nom commence par la chaîne indiquée :

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

8. Affichage et masquage des contrôles

Pour indiquer si un contrôle spécifique est affiché, vous pouvez définir son attribut display sur none :

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

Pour masquer un contrôle dans une seule instance d’un TimePicker, vous devez référencer l’ID de l’élément <div> associé. Par exemple, pour masquer uniquement les minutes du contrôle TimePicker affiché dans l’élément <div> dont l’ID correspond à « time », procédez comme suit :

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

9. Affichage des contrôles TimePicker verticalement

Pour afficher les contrôles des heures, des minutes et de l’indicateur AM/PM verticalement plutôt qu’horizontalement, vous devez définir l’attribut CSS display pour ces contrôles. Vous devez également définir display sur « block » pour l’élément DIV.


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

Vous pouvez afficher les contrôles verticalement lorsqu’une condition est vérifiée, par exemple lorsque la largeur de l’écran est inférieure à une limite spécifiée. La demande de support CSS suivante spécifie que les contrôles doivent s’afficher verticalement pour toutes les largeurs jusqu’à 320 pixels.

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

10. Utilisation de pseudo-classes pour définir les styles du TimePicker

Le TimePicker prend en charge les pseudo-classes suivantes que vous pouvez utiliser comme sélecteurs pour afficher certains styles lorsque le DatePicker se trouve dans certains états.

win-timepicker:hover.L’utilisateur place le curseur sur le sélecteur mais ne l’active pas en cliquant. Ici, la souris est positionnée sur le menu déroulant des heures.
win-timepicker:active. Le sélecteur s’active lorsque l’utilisateur appuie sur le contrôle pour ouvrir le menu déroulant mais avant qu’il ne choisisse une option.
win-timepicker:focus. Le sélecteur est mis en surbrillance pour accepter les entrées du clavier.
win-timepicker:disabled. Le sélecteur ne peut pas accepter les interactions de l’utilisateur. La propriété disabled du sélecteur doit être définie sur true pour cette pseudo-classe.