Tutorial: Globalizar una fecha utilizando script de cliente

Artículo
10/22/2014

Actualización: noviembre 2007

En este tutorial utilizará ECMAScript (JavaScript) para mostrar días, meses y otros valores de fecha en formatos globalizados. La funcionalidad AJAX de ASP.NET proporciona compatibilidad con la globalización de cliente basada en un valor del control ScriptManager. Una vez aplicados a la aplicación web estos valores de globalización, puede utilizar script de cliente para dar formato a un objeto JavaScript Date o Number basándose en un valor de referencia cultural. Esto no requiere una devolución de datos al servidor.

El valor de referencia cultural utilizado en el script de cliente se basa en la configuración de la referencia cultural predeterminada proporcionada por la configuración del explorador del usuario. Como alternativa, se puede establecer en un valor de referencia cultural concreto utilizando la configuración de servidor o código del servidor en la aplicación.

Un valor de referencia cultural proporciona información sobre una referencia cultural concreta (configuración regional). El valor de referencia cultural es una combinación de dos letras que representan el idioma y otras dos que representan el país o la región. Ejemplos de ello son es-MX (español de México), es-CO (español de Colombia) o fr-CA (francés de Canadá).

Las extensiones Date de ASP.NET AJAX agregan funcionalidad al objeto JavaScript Date proporcionando el método localeFormat. Este método permite dar formato a un objeto Date basándose en la configuración de idioma del explorador, en la configuración del servidor o en el código de servidor. Esta configuración afecta al valor de referencia cultural del servidor, que este último interpreta para generar un objeto de cliente expuesto por la propiedad Sys.CultureInfo.CurrentCulture. Este objeto se utiliza para dar formato a las fechas.

Para obtener más información sobre las referencias culturales y configuraciones regionales, consulte Globalización y adaptación en ASP.NET y la información general de la clase CultureInfo.

Requisitos previos

Para implementar los procedimientos en su propio entorno de desarrollo, necesitará:

Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express.
Un sitio web ASP.NET habilitado para AJAX.

Globalizar una fecha basándose en la configuración del explorador

Para comenzar, se utiliza la configuración de la preferencia de idioma del explorador para especificar cómo dar formato a una fecha.

Para globalizar una fecha basándose en la preferencia de idioma del explorador

Cierre todas las instancias abiertas de Microsoft Internet Explorer o del explorador predeterminado, a fin de que todas las nuevas instancias utilicen una nueva configuración regional.
Abra una nueva instancia de Internet Explorer.
En el menú Herramientas, haga clic sucesivamente en Opciones de Internet, la ficha General e Idioma.
Establezca la preferencia de idioma en es-MX (español de México) y quite el resto de configuraciones regionales de la lista.

Nota:

Si utiliza un explorador diferente, establezca la configuración de idioma equivalente en ese explorador.
Cierre el explorador.
En Visual Studio, cree o abra una página web ASP.NET habilitada para AJAX y, a continuación, cambie a la vista Diseño.
Seleccione el control ScriptManager y establezca su propiedad EnableScriptGlobalization en true.

Nota:

Si la página no contiene un control ScriptManager, agregue uno de la ficha Extensiones AJAX del Cuadro de herramientas.
En la ficha Extensiones AJAX del Cuadro de herramientas, haga doble clic en el control UpdatePanel para agregar un panel de actualización a la página.
Establezca la propiedad ChildrenAsTriggers del control UpdatePanel en false.
Establezca la propiedad UpdateMode del control UpdatePanel en Conditional.
Haga clic dentro del control UpdatePanel y, a continuación, desde la ficha Estándar del Cuadro de herramientas, agregue un control Button y un control Label al control UpdatePanel.

Nota:

Asegúrese de agregar los controles Label y Button dentro del control UpdatePanel.
Asegúrese de que la propiedad ID del botón esté establecida en Button1; a continuación, establezca su propiedad Text en Fecha para mostrar.
Asegúrese de que la propiedad ID de la etiqueta esté establecida en Label1.
Cambie a la vista de código fuente.

Nota:
Si utiliza un explorador diferente, establezca la configuración de idioma equivalente en ese explorador.

Nota:
Si la página no contiene un control ScriptManager, agregue uno de la ficha Extensiones AJAX del Cuadro de herramientas.

Nota:
Asegúrese de agregar los controles Label y Button dentro del control UpdatePanel.

En la parte inferior de la página, cree un elemento script y agréguele el siguiente script de cliente:

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

Este código agrega un controlador click al botón denominado Button1. El código llama a la función formatDate, que crea un nuevo objeto Date y muestra la fecha con formato en el elemento denominado Label1. Se da formato a la fecha utilizando la función localeFormat que forma parte de las extensiones de Microsoft AJAX Library del objeto Date.

En el archivo Web.config del sitio web, incluya el elemento globalization siguiente en la sección system.web:
```
<globalization culture="auto" />
```
El valor "auto" especifica que el encabezado ACCEPT-LANGUAGE de la solicitud del explorador (que proporciona la lista de preferencias de idioma del usuario) se utiliza para establecer el valor de la referencia cultural.
Guarde los cambios y ejecute la página web en el explorador donde cambió la configuración de idioma.

Haga clic en el botón Fecha para mostrar para ver el valor de fecha globalizado basado en la configuración de idioma del explorador.

En el ejemplo siguiente se muestra una página web ASP.NET completa con el script de cliente que globaliza una fecha basándose en la preferencia de idioma del explorador.

<%@ 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>

Cuando haya finalizado, restablezca la configuración de idioma en el explorador.

Globalizar una fecha basándose en los valores de configuración

Si desea mostrar fechas con formato en varias páginas, puede establecer la referencia cultural en el archivo de configuración del sitio web. En este caso, la configuración de formato se aplica a las fechas de todas las páginas.

Para globalizar una fecha basándose en los valores del archivo de configuración

En el archivo Web.config de la aplicación, cambie el elemento globalization de la sección system.web como sigue:
```
<globalization culture="fr-CA" />
```
Este valor establece la referencia cultural en "fr-CA" (francés de Canadá), sin tener en cuenta lo que especifica la configuración de idioma del explorador.
Guarde los cambios y ejecute la página web en el explorador.

Haga clic en el botón Fecha para mostrar para ver el valor de fecha globalizado.

El formato de la fecha se basa ahora en el atributo de referencia cultural del archivo de configuración, en lugar de en la preferencia de idioma del explorador.

En el ejemplo siguiente se muestra una página web ASP.NET completa con script de cliente que globaliza una fecha basándose en los valores del archivo de configuración.

<%@ 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>

Globalizar una fecha basándose en la configuración de página

Para establecer la referencia cultural de una página individual, puede utilizar el atributo Culture de la directiva @ Page. El atributo Culture de la directiva @ Page tiene prioridad sobre el valor del archivo de configuración y sobre la configuración de idioma del explorador.

Para globalizar una fecha basándose en la configuración de una página

En la página en la que está trabajando, modifique la directiva @ Page a fin de establecer el valor de referencia cultural en "de-DE" (alemán de Alemania), como se muestra en el ejemplo siguiente:
```
<%@ Page Language="C#" AutoEventWireup="true" Culture="de-DE" %>
```
Guarde los cambios y ejecute la página web en el explorador.

Haga clic en el botón Fecha para mostrar para ver el valor de fecha globalizado.

El formato de la fecha se basa ahora en el atributo Culture de la directiva @ Page.

En el ejemplo siguiente se muestra una página web ASP.NET completa con script de cliente que globaliza una fecha basándose en la configuración de una página.

<%@ 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>

Globalizar una fecha mediante programación

Si desea establecer el valor de referencia cultural de una página mediante programación, puede invalidar el método InitializeCulture de la página en el código de servidor. El método InitializeCulture tiene prioridad sobre la configuración de referencia cultural de la directiva @ Page, del archivo de configuración y del explorador.

Para globalizar una fecha mediante programación

Agregue el método siguiente a la página:
```
  Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub
```
```
protected override void InitializeCulture()
{
    this.Culture = "it-IT";
}
```
Este código invalida el método InitializeCulture de la clase base Page y establece el valor de referencia cultural en "it-IT" (italiano de Italia). En el ciclo de vida de la página, éste es el momento apropiado para cambiar la referencia cultural mediante programación.
Guarde los cambios y ejecute la página web en el explorador.

Haga clic en el botón Fecha para mostrar para ver la fecha globalizada.

El formato del valor de fecha se basa ahora en el código de servidor.

En el ejemplo siguiente se muestra una página web ASP.NET completa con script de cliente que globaliza una fecha mediante programación.

<%@ 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>

Modelos de formato

El método localeFormat puede aceptar diversos modelos de formato. Para obtener más información sobre los formatos de las cadenas de fecha y hora, consulte Sys.CultureInfo (Clase).

Vea también

Tareas

Cómo: Establecer la referencia cultural y la referencia cultural de la interfaz de usuario para la globalización de páginas Web ASP.NET

Otros recursos

Globalización y adaptación en ASP.NET

Compartir a través de