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

  • Article

[ 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 à définir une date dans votre application, par exemple pour planifier un rendez-vous ou définir la date d’expiration d’une carte de crédit, vous pouvez utiliser un DatePicker, qui fait partie de la bibliothèque Windows pour JavaScript. Le DatePicker affiche trois contrôles pour le mois, la date et l’année. 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 utiliser un DatePicker

Prérequis

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

Instructions

1. Création d’un DatePicker simple

Comme pour la plupart des contrôles WinJS, vous pouvez créer un DatePicker 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 activated.

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

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

Voici comment créer un DatePicker dans du 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>

Lorsque vous générez et exécutez votre solution, un contrôle affiche par défaut la date actuelle, avec trois menus déroulants pour le mois, le jour et l’année :

Lorsque vous utilisez le fichier ui-dark.css, le contrôle DatePicker doit se présenter comme suit : Style sombre du contrôle DatePicker

Lorsque vous utilisez le fichier ui-light.css, le contrôle DatePicker doit se présenter comme suit : Style clair du contrôle DatePicker

2. Modification de la date par défaut

Vous pouvez définir une date par défaut différente de façon déclarative :

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

Vous pouvez également définir la date par défaut dans un code :

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

Vous pouvez appliquer à la chaîne de date n’importe quelle mise en forme autorisée par l’objet JavaScript Date. Voici quelques exemples :

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

Important  Vous pouvez utiliser n’importe quel calendrier dans cette version.

 

3. Spécification de dates minimale et maximale différentes

Par défaut, l’année la plus ancienne et l’année la plus récente que l’utilisateur peut sélectionner sont respectivement l’année actuelle moins 100 et l’année actuelle plus 100. Pour définir l’année la plus ancienne sur 1900 et l’année la plus récente sur 2300, vous pouvez procéder comme suit :

De manière déclarative

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

Dans un code

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

4. Modification du modèle du jour, du mois ou de l’année

Vous pouvez modifier le modèle du jour, du mois ou de l’année. Par défaut, le DatePicker affiche le nom complet du mois, un jour à 2 chiffres et une année à 4 chiffres dans le paramètre régional en-us. Vous pouvez modifier cela comme expliqué ci-après.

Pour modifier l’affichage du mois


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

Pour modifier l’affichage du jour


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

Pour modifier l’affichage de l’année


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

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

La liste suivante indique les valeurs possibles des modèles utilisables dans un 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. Modification du calendrier

Vous pouvez modifier le calendrier utilisé par le DatePicker.

  • Définissez le calendrier sur l’une des valeurs suivantes :

    • "GregorianCalendar"

    • "HijriCalendar"

    • "HebrewCalendar"

    • "JapaneseCalendar"

    • "KoreanCalendar"

    • "ThaiCalendar"

    • "TaiwanCalendar"

    • "UmAlQuraCalendar"

    • "JulianCalendar"

    
datePicker.calendar = "ThaiCalendar";

6. Désactivation d’un DatePicker

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

datePicker.disabled = true;

7. Réponse à l’événement de modification

Vous pouvez modifier le comportement de votre application en gérant l’événement change. Cet événement est déclenché lorsque l’utilisateur change une date, pas lorsque la date est modifiée par programme.


datePicker.onchange = dateChangeHandler;

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

8. Modification de l’apparence d’un DatePicker

En général, vous pouvez modifier l’aspect d’un contrôle DatePicker au moyen de styles CSS. Vous pouvez utiliser les styles border-color et background-color pour mettre en évidence votre contrôle DatePicker.

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

Vous pouvez spécifier certaines parties d’un contrôle DatePicker en utilisant les classes CSS suivantes :

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

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


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

Le menu déroulant de date s’affiche alors avec une bordure bleue (au moyen du fichier ui-light.css) : Un contrôle DatePicker auquel un style est appliqué

Vous pouvez spécifier les trois menus déroulants DatePicker à 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-datepicker"] {border:red; }

9. Affichage et masquage des contrôles

Pour indiquer si le jour et/ou l’année sont affichés, vous pouvez définir l’attribut display du menu déroulant concerné sur none :

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

Pour masquer un menu déroulant pour une seule instance d’un DatePicker, vous devez spécifier l’ID de l’élément <div>. Par exemple, pour masquer la date uniquement pour le DatePicker affiché dans l’élément <div> dont l’ID a pour valeur « date », procédez comme suit :

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

10. Affichage vertical des menus déroulants DatePicker

Pour afficher les contrôles du mois, du jour et de l’année verticalement plutôt qu’horizontalement, vous pouvez définir l’attribut CSS display pour ces menus déroulants. Vous devez également définir display sur « block » pour l’élément DIV.


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

Vous pouvez afficher les menus déroulants 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) {
#date {display:block;}
*[class^="win-datepicker"] { display: block; }
}

11. Utilisation de différents styles pour différentes instances de DatePicker

Vous pouvez utiliser différents styles pour une instance de DatePicker spécifique en indiquant l’élément <div> associé à cette instance. Par exemple, si un élément <div> comprend un DatePicker dont l’ID a pour valeur « start-date » et qu’un élément <div> comprend un autre DatePicker dont l’ID a pour valeur « end-date », vous pouvez définir différentes couleurs de police pour les DatePickers de date de début et de date de fin comme suit :

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

12. Utilisation de pseudo-classes pour définir les styles du DatePicker

Le DatePicker 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-datepicker: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 mois. DatePicker avec pointage de la souris

  • win-datepicker: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.DatePicker à l’état actif

  • win-datepicker:focus. Le sélecteur est mis en surbrillance pour accepter les entrées du clavier.DatePicker est en surbrillance

  • win-datepicker: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.DatePicker est désactivé

Récapitulatif

Dans cette rubrique, vous avez appris à créer un DatePicker.