Procédure pas à pas : globalisation d'une date à l'aide d'un script client

  • Article

Mise à jour : novembre 2007

Dans cette procédure pas à pas, vous allez utiliser ECMAScript (JavaScript) pour afficher des jours et des mois, ainsi que d'autres valeurs liées aux dates dans des formats globalisés. Dans ASP.NET, les fonctionnalités AJAX prennent en charge la globalisation cliente sur la base d'un paramètre figurant dans le contrôle ScriptManager. Une fois ces paramètres de globalisation appliqués à l'application Web, vous pouvez utiliser un script client pour mettre en forme un objet Date ou Number JavaScript sur la base d'une valeur de culture. Cela ne requiert pas de publication (postback) sur le serveur.

La valeur de culture utilisée par le script client est basée sur le paramètre de culture par défaut fourni par les paramètres du navigateur de l'utilisateur. Vous pouvez également affecter une valeur de culture spécifique à l'aide des paramètres de serveur ou du code serveur de votre application.

Une valeur de culture fournit des informations sur une culture spécifique (paramètres régionaux). La valeur de culture est une combinaison de deux lettres pour une langue et de deux lettres pour un pays ou une région : es-MX (espagnol du Mexique), es-CO (espagnol de la Colombie) et fr-CA (français du Canada), par exemple.

Les extensions Date ASP.NET AJAX ajoutent des fonctionnalités à l'objet Date JavaScript grâce à la méthode localeFormat. Cette méthode permet de mettre en forme un objet Date sur la base du paramètre de langue du navigateur, des paramètres de serveur ou du code serveur. Ces paramètres influent sur la valeur de la culture du serveur, qui est ensuite interprétée par le serveur pour générer un objet client exposé par la propriété Sys.CultureInfo.CurrentCulture. Cet objet est utilisé pour mettre en forme des dates.

Pour plus d'informations sur les cultures et les paramètres régionaux, consultez Globalisation et localisation ASP.NET et la vue d'ensemble de la classe CultureInfo.

Composants requis

Pour implémenter les procédures dans votre propre environnement de développement, vous avez besoin des éléments suivants :

  • Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express

  • Un site Web ASP.NET AJAX

Globalisation d'une date sur la base des paramètres du navigateur

Vous allez commencer par utiliser les paramètres de préférence de langue du navigateur pour spécifier la mise en forme d'une date.

Pour globaliser une date sur la base de la préférence de langue du navigateur

  1. Fermez toutes les instances ouvertes de Microsoft Internet Explorer ou de votre navigateur par défaut pour que toutes les nouvelles instances utilisent de nouveaux paramètres régionaux.

  2. Ouvrez une nouvelle instance d'Internet Explorer.

  3. Dans le menu Outils, cliquez sur Options Internet, sur l'onglet Général et sur Langues.

  4. Affectez à la préférence de langue la valeur es-MX (espagnol du Mexique) et supprimez tous les autres paramètres régionaux de la liste.

    Remarque :

    Si vous utilisez un navigateur différent, définissez les paramètres de langue équivalents dans ce navigateur.

  5. Fermez le navigateur.

  6. Dans Visual Studio, créez ou ouvrez une page Web ASP.NET AJAX et basculez en mode Design.

  7. Sélectionnez le contrôle ScriptManager et affectez true à sa propriété EnableScriptGlobalization.

    Remarque :

    Si la page ne contient pas de contrôle ScriptManager, ajoutez-en un à partir de l'onglet Extensions AJAX de la boîte à outils.

  8. Sous l'onglet Extensions AJAX de la boîte à outils, double-cliquez sur le contrôle UpdatePanel pour ajouter un panneau de mise à jour à la page.

  9. Affectez false à la propriété ChildrenAsTriggers du contrôle UpdatePanel.

  10. Affectez Conditional à la propriété UpdateMode du contrôle UpdatePanel.

  11. Cliquez à l'intérieur du contrôle UpdatePanel. À partir de l'onglet Standard de la boîte à outils, ajoutez ensuite un contrôle Button et un contrôle Label au contrôle UpdatePanel.

    Remarque :

    Assurez-vous que vous ajoutez les contrôles Label et Button à l'intérieur du contrôle UpdatePanel.

  12. Vérifiez que la propriété ID du bouton a la valeur Button1 et affectez Afficher la date à sa propriété Text.

  13. Vérifiez que la valeur Label1 est affectée à la propriété ID de l'étiquette.

  14. Basculez en mode Source.

  15. En bas de la page, créez un élément script et ajoutez-y le script client suivant :

    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
function formatDate() {
  var d = new Date();
  try {
    $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
  }
  catch(e) {
    alert("Error:" + e.message);
  }
}

    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
function formatDate() {
  var d = new Date();
  try {
    $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
  }
  catch(e) {
    alert("Error:" + e.message);
  }
}

    Ce code ajoute un gestionnaire click au bouton nommé Button1. Le code appelle la fonction formatDate, qui crée un objet Date et affiche la date mise en forme dans l'élément nommé Label1. La date est mise en forme à l'aide de la fonction localeFormat qui fait partie des extensions Microsoft AJAX Library de l'objet Date.

  16. Dans le fichier Web.config du site Web, incluez l'élément globalization dans la section system.web :

    <globalization culture="auto" />

    Le paramètre "auto" spécifie que l'en-tête ACCEPT-LANGUAGE qui se trouve dans la demande du navigateur (qui fournit la liste des préférences de langue de l'utilisateur) est utilisé pour définir la valeur de culture.

  17. Enregistrez vos modifications, puis exécutez la page Web dans le navigateur dans lequel vous avez modifié les paramètres de langue.

  18. Cliquez sur le bouton Afficher la date pour afficher la valeur de date globalisée sur la base des paramètres de langue du navigateur.

    Une page Web ASP.NET complète avec un script client qui globalise une date sur la base de la préférence de langue du navigateur est illustrée dans l'exemple suivant.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

  19. Lorsque vous avez terminé, rétablissez les paramètres de langue dans le navigateur.

Globalisation d'une date sur la base de paramètres de configuration

Pour afficher des dates mises en forme dans plusieurs pages, vous pouvez définir la culture dans le fichier de configuration du site Web. Les paramètres de mise en forme sont ensuite appliqués aux dates dans toutes les pages.

Pour globaliser une date sur la base des paramètres du fichier de configuration

  1. Dans le fichier Web.config de l'application, modifiez l'élément globalization qui figure dans la section system.web de la manière suivante :

    <globalization culture="fr-CA" />

    Ce paramètre affecte "fr-CA" (français du Canada) à la valeur de culture, quel que soit le paramètre de langue spécifié par le navigateur.

  2. Enregistrez vos modifications, puis exécutez la page Web dans votre navigateur.

  3. Cliquez sur le bouton Afficher la date pour afficher la valeur de date globalisée.

    La mise en forme de la date est désormais basée sur l'attribut de culture qui figure dans le fichier de configuration et non plus sur la préférence de langue du navigateur.

    Une page Web ASP.NET complète avec un script client qui globalise une date sur la base des paramètres du fichier de configuration est illustrée dans l'exemple suivant.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

Globalisation d'une date sur la base du paramètre d'une page

Pour définir la culture d'une page déterminée, vous pouvez utiliser l'attribut Culture de la directive @ Page. L'attribut Culture de la directive @ Page est prioritaire par rapport au paramètre qui figure dans le fichier de configuration et aux paramètres de langue du navigateur.

Pour globaliser une date sur la base du paramètre d'une page

  1. Dans la page concernée, modifiez la directive @ Page en affectant "de-De" (allemand d'Allemagne) à la valeur de culture, comme indiqué dans l'exemple suivant :

    <%@ Page Language="C#" AutoEventWireup="true" Culture="de-DE" %>

  2. Enregistrez vos modifications, puis exécutez la page Web dans le navigateur.

  3. Cliquez sur le bouton Afficher la date pour afficher la valeur de date globalisée.

    La mise en forme de la date est désormais basée sur l'attribut Culture de la directive @ Page.

    Une page Web ASP.NET complète avec un script client qui globalise une date sur la base du paramètre d'une page est illustrée dans l'exemple suivant.

    <%@ Page Language="VB" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

Globalisation d'une date par programme

Pour définir par programme la valeur de culture d'une page, vous pouvez substituer la méthode InitializeCulture de la page dans le code serveur. La méthode InitializeCulture est prioritaire par rapport aux paramètres de culture qui figurent dans la directive @ Page, dans le fichier de configuration et dans le navigateur.

Pour globaliser une date par programme

  1. Ajoutez la méthode suivante à la page :

      Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub

    protected override void InitializeCulture()
{
    this.Culture = "it-IT";
}

    Ce code substitue la méthode InitializeCulture de la classe de base Page et affecte "it-IT" (italien d'Italie) à la valeur de culture. C'est à ce moment du cycle de vie de la page que la culture est modifiée par programme.

  2. Enregistrez vos modifications, puis exécutez la page Web dans le navigateur.

  3. Cliquez sur le bouton Afficher la date pour afficher la date globalisée.

    La valeur de date est désormais mise en forme sur la base du code serveur.

    Une page Web ASP.NET complète avec un script client qui globalise une date par programme est illustrée dans l'exemple suivant.

    <%@ Page Language="VB" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script >
    Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script >
        protected override void InitializeCulture()
        {
            this.Culture = "it-IT";
        }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

Modèles de mise en forme

La méthode localeFormat peut accepter divers modèles de mise en forme. Pour plus d'informations sur les formats de chaîne de date et d'heure, consultez Sys.CultureInfo, classe.

Voir aussi

Tâches

Comment : définir la culture et la culture de l'interface utilisateur pour la globalisation des pages Web ASP.NET

Autres ressources

Globalisation et localisation ASP.NET