miércoles, 1 de marzo de 2017

Ionic 2: Selección de fecha y hora (2)

Este artículo viene a añadir más posibilidades a la app creada en el artículo "Ionic2: Selección de fecha y hora".

Selección del mes por su nombre

A la hora de mostrar el mes, tanto para su selección como para su visualización, debemos conocer el formato que nos ofrece el componente DateTime de Ionic 2. La propiedad displayFormat posee un rico repertorio de posibilidades para configurar esto. En el caso del mes, tenemos estos formatos:
  • M: Número de mes (1..12)
  • MM: Número de mes (01..12)
  • MMM: Nombre corto de mes (Jan, Feb...)
  • MMMM: Número completo del mes (January, February...)

Por defecto, los nombres vienen dados en inglés, pero es posible modificar sus literales a través de las siguientes propiedades:
  • monthNames="Enero, Febrero...": Especifica los literales para los nombres completos
  • monthShortNames="Ene, Feb...": Especifica los literales para los nombres cortos


Para ver ésto en acción, podemos añadir otra tarjeta al ejemplo:



Formatos de fecha y hora

En la siguiente lista se muestran todos los formatos disponibles para la fecha:
  • YYYY: Año en cuatro dígitos (2017)
  • YY: Año en dos dígitos
  • M: Número de mes (1..12)
  • MM: Número de mes (01..12)
  • MMM: Nombre corto del mes (January)
  • MMMM: Nombre completo del mes (Jan)
  • D: Número del día (1..31)
  • DD: Número del día (01..31)
  • DDD: Nombre Corto del día (Mon)
  • DDDD: Nombre completo del día (Monday)


En esta otra lista se muestran todos los formatos disponibles para la hora:
  • H: Hora en formato 24h (1..23)
  • HH: Hora en formato 24h (01..23)
  • h: Hora en formato 12h (1..12)
  • hh: Hora en formato 12h (01..12)
  • m: Minuto (0..59)
  • mm: Minuto (00..59)
  • s: Segundo (0..59)
  • ss: Segundo (00..59)
  • a: Período 12h (am / pm)
  • A: Período 12h (AM / PM)


Para modificar los literales de los nombres:
  • monthNames="Enero, Febrero...": Nombres completos del mes
  • monthShortNames="Ene, Feb...": Nombres cortos del mes
  • dayNames="Domingo, Lunes...": Nombres completos del día
  • dayShortNames="Dom, Lun...": Nombres cortos del día


Formato ISO 8601

Los valores de fecha del componente DateTime no trabajan con el tipo Date de JavaScript, a fin de evitar problemas de parseo o de formateo de los valores. En su lugar, utiliza el formato string (cadena de texto), utilizando la sintaxis de ISO 8601: YYYY-MM-DDTHH:mm:ssZ

Sin embargo, ISO 8601 permite trabajar en diferentes formatos:
  • YYYY: Año (2017)
  • YYYY-MM: Año y mes (2017-03)
  • YYYY-MM-DD: Fecha completa (2017-03-01)
  • YYYY-MM-DDTHH:mm: Fecha y hora (2017-03-01T15:04
  • YYYY-MM-DDTHH:mm:ssTZD: Zona horaria UTC (2017-03-01T15:04:37.598Z)
  • YYYY-MM-DDTHH:mm:ssTZD: Zona horaria Offset (2017-03-01T15:04:37.598+1:00)
  • HH:mm: Hora y minuto (15:04)
  • HH:mm:ss: Hora, minuto y segundo (15:04:37)


displayFormat y pickerFormat

La propiedad displayFormat del componente DateTime especifica cómo visualizar el valor de la fecha/hora dentro del propio componente.

La propiedad pickerFormat especifica qué columnas, en qué orden y en qué formato se muestran los campos a seleccionar por el componente DateTime




Rango de fechas

Las propiedades min y max del componente DateTime definen la fecha mínima y máxima que se puede seleccionar. En el ejemplo habíamos introducido únicamente el año, por lo que asume, por defecto, el 1 de Enero de el año para la propiedad min, y el 31 de Diciembre para el año en la propiedad max.

Para especificar rangos más concretos, se debe concretar las fechas en formato YYYY-MM-DD. Por ejemplo, para especificar un rango entre el 15 de Mayo y el 30 de Junio de 2017, la configuración sería la siguientes:

min="2017-05-15" max="2017-06-30"

Enlaces de interés

Publicado por
Etiquetas: , , , , , ,