Inicio rápido: agregar un control DatePicker (HTML)

Artículo
03/04/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Si necesitas que los usuarios indiquen una fecha en la aplicación, como por ejemplo para programar una cita o definir la fecha de expiración de una tarjeta de crédito, puedes usar un control DatePicker, que forma parte de la Biblioteca de Windows para JavaScript. El control DatePicker muestra tres controles para el mes, el día y el año. Estos controles son fáciles de usar con la compatibilidad táctil. Puedes configurarlos y aplicarles un estilo de varias maneras distintas. (solo Windows)

Objetivo: Mostrar cómo usar un control DatePicker.

Requisitos previos

En este tema se da por hecho que sabes crear una aplicación de Windows en tiempo de ejecución básica con JavaScript. Para obtener instrucciones para crear tu primera aplicación, consulta Crear la primera aplicación de Windows en tiempo de ejecución con JavaScript.

Instrucciones

1. Creación de un control DatePicker sencillo

Como sucede con la mayoría de los controles de WinJS, puedes crear un control DatePicker mediante declaración (como un atributo data-win-control en un elemento <div>) o de manera imperativa (en un bloque de código JavaScript). Para que el control aparezca, debes llamar a WinJS.UI.processAll. Si usas plantillas de proyecto de Visual Studio para aplicaciones de la Tienda Windows con JavaScript, esto se hace automáticamente en el controlador de eventos activated.

Sigue este proceso para declarar el control DatePicker de manera declarativa:

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

Sigue este proceso para crear un control TimePicker en el código:

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

Cuando compilas y ejecutas la solución, verás un control que muestra de manera predeterminada la fecha actual, con tres desplegables para el mes, el día y el año.

Al usar el archivo ui-dark.css, el DatePicker debería tener este aspecto: Estilo oscuro de DatePicker

Al usar el archivo ui-light.css, el DatePicker debería tener este aspecto: Estilo claro de DatePicker

2. Cambiar la fecha predeterminada

Puedes establecer una fecha predeterminada distinta de manera declarativa:

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

También puedes establecer la fecha predeterminada en código:

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

Puedes aplicar formato a la cadena de fecha de todas las maneras que te permita el objeto Date. A continuación se muestran algunos ejemplos:

20 de febrero de 2011
20/02/2011
Domingo, 20 de febrero de 2011

Importante Puedes usar cualquier calendario de esta versión.

3. Especificar distintas fechas mínimas y máximas

De manera predeterminada, el año más antiguo que el usuario puede seleccionar es el año actual menos 100, y el año más avanzado que el usuario puede seleccionar es el año actual más 100. Para cambiar el año más antiguo a 1900 y el año más avanzado a 2300, puedes hacer esto:

De manera declarativa

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

En código

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

4. Cambiar el patrón del día, el mes o el año

Puedes cambiar el patrón del día, el mes o el año. De manera predeterminada, el control DatePicker muestra el nombre completo del mes, un día de 2 dígitos y un año de 4 dígitos en la configuración regional en-us. Puedes cambiar esto de varias maneras:

Para cambiar el modo en que se muestra el mes


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

Para cambiar el modo en que se muestra el día


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

Para cambiar el modo en que se muestra el año


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

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

En la siguiente lista se ofrecen los posibles valores para los patrones que puedes usar en un control 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. Cambiar de calendario

Puedes cambiar el calendario usado por el control DatePicker.

Cambia el calendario a uno de los siguientes valores:
- "GregorianCalendar"
- "HijriCalendar"
- "HebrewCalendar"
- "JapaneseCalendar"
- "KoreanCalendar"
- "ThaiCalendar"
- "TaiwanCalendar"
- "UmAlQuraCalendar"
- "JulianCalendar"
```
datePicker.calendar = "ThaiCalendar";
```

6. Deshabilitar un control DatePicker

Puedes deshabilitar un control DatePicker si configuras su propiedad disabled en true. Como resultado, el control está visible pero atenuado y no está disponible para el usuario.

datePicker.disabled = true;

7. Responder al evento change

Puedes modificar el comportamiento de la aplicación si administras el evento change. Este evento se emite cuando el usuario cambia una fecha, pero no cuando la fecha se cambia mediante programación.


datePicker.onchange = dateChangeHandler;

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

8. Cambiar el aspecto de un control DatePicker

Por lo general, para cambiar el aspecto de un DatePicker puedes usar estilos CSS. Puedes usar los estilos border-color y background-color para hacer que tu DatePicker destaque.

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

Puedes especificar algunas partes de un control DatePicker mediante las siguientes clases CSS:

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

Por ejemplo, puedes cambiar el color del borde del menú desplegable de fecha:


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

Esto hace que el menú desplegable de fecha aparezca con un borde azul (usando el archivo ui-light.css) : Un DatePicker con estilo

Puedes especificar los tres menús desplegables DatePicker usando la sintaxis de prefijo del selector de atributo CSS (^=), que encuentra cada atributo cuyo nombre empiece por la cadena especificada:

[class^="win-datepicker"] {border:red; }

9. Mostrar y ocultar controles

Puedes especificar si el día y/o el año se mostrarán al configurar el atributo display del menú desplegable específico en none:

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

Si quieres ocultar un control para una sola instancia de un menú desplegable DatePicker, debes especificar el identificador del elemento <div>. Por ejemplo, si quieres ocultar la fecha solo para el control DatePicker que se muestra en el elemento <div> que tiene un identificador de "fecha", haz esto:

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

10. Mostrar verticalmente los menús desplegables del control DatePicker

Si quieres mostrar los menús desplegables del mes, el día y el año verticalmente en lugar de horizontalmente, puedes configurar el atributo CSS display en los controles. También debes configurar display para que se bloquee en el propio DIV.


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

Puedes mostrar los menús desplegables verticalmente de manera condicional, como por ejemplo, cuando el ancho de la pantalla se encuentra por debajo de un límite especificado. La siguiente consulta de medios CSS especifica que los controles deben mostrarse verticalmente para todos los anchos hasta 320 píxeles.

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

11. Usar estilos distintos para distintas instancias de DatePicker

Puedes usar estilos distintos para una instancia específica de DatePicker. Para ello, especifica el elemento <div> asociado a esta instancia. Por ejemplo, si tienes un control DatePicker en un <div> que tiene un identificador de "start-date" y otro en un <div> que tiene un identificador de "end-date", puedes establecer diferentes colores de fuente para los controles DatePicker de fecha de inicio y fecha de finalización, del modo siguiente:

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

12. Uso de seudoclases par aplicar estilos al DatePicker

El DatePicker admite las siguientes seudoclases que puedes usar como selectores para mostrar ciertos estilos cuando el DatePicker esté en determinados estados.

win-datepicker:hover. El usuario coloca el cursor encima del selector, pero no lo activa haciendo clic. Aquí el mouse se mantiene encima del menú desplegable del mes.
win-datepicker:active. El selector está activo después de que el usuario presiona el control para abrir el menú desplegable y antes de haber elegido una opción.
win-datepicker:focus. El selector se resalta para aceptar las entradas de teclado.
win-datepicker:disabled. El selector no puede aceptar la interacción del usuario. La propiedad disabled del selector debe establecerse en true para esta seudoclase.