Fechas y horas

Descripción general

Los tipos de datos de las columnas date y datetime de la tabla de datos usan la clase de fecha de JavaScript integrada.

Importante: En los objetos de fecha de JavaScript, los meses se indexan a partir de cero y suben hasta once, con enero el mes 0 y diciembre el 11.

Fechas y horas con el constructor de fechas

Fechas con el Constructor de fechas

Para crear un nuevo objeto de fecha, llama al constructor Date() con la palabra clave new, con argumentos para especificar los componentes de la fecha. Estos argumentos tienen el formato de varios números que corresponden a las diferentes propiedades de tu fecha.

new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)

Cuando usas el constructor de fechas con el tipo de datos date, solo debes especificar el año, mes y día.

El constructor de fecha también puede adoptar la forma: new Date(Milliseconds), en el que los milisegundos son la distancia en milisegundos de la fecha deseada del 1 de enero de 1970 00:00:00 UTC. Para las fechas y horas anteriores a esa fecha, se daría un número negativo de milisegundos.

Usar el constructor de fecha es útil cuando creas manualmente tu DataTable con los métodos addColumn(), addRow() y addRows(), así como con el método arrayToDataTable(). Sin embargo, si usas JSON para especificar datos, se debe usar la representación de string.

El constructor de fechas de JavaScript también puede aceptar una representación de string de la fecha como un argumento. Esta string puede adoptar diferentes formas. Los formularios más confiables cumplen con la especificación RFC 2822 o la especificación ISO 8601. Estos son los formatos:

  • RFC 2822: 'MMM DD, YYYY' o 'DD MMM, YYYY' (ejemplo: new Date('Jan 1, 2015') o new Date('1 Jan, 2015'))
  • ISO 8601: 'YYYY-MM-DD' (ejemplo: new Date('2015-01-01'))

Advertencia: La representación de string en el constructor de fechas puede analizarse de manera diferente según el navegador y la versión de navegador, lo que muestra fechas diferentes para la misma string. Por lo tanto, no se recomienda pasar strings al constructor de fechas. En su lugar, se recomienda usar solo números para los argumentos del constructor de fecha.

El cronograma a continuación muestra el campeón del Super Bowl de cada temporada de la NFL desde el año 2000.


A continuación, se muestra el código para crear este cronograma. Ten en cuenta el uso de los constructores new Date() y los números proporcionados para cada fecha, con meses basados en 0, como se mencionó antes.

    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Team');
      data.addColumn('date', 'Season Start Date');
      data.addColumn('date', 'Season End Date');

      data.addRows([
        ['Baltimore Ravens',     new Date(2000, 8, 5), new Date(2001, 1, 5)],
        ['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)],
        ['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)],
        ['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)],
        ['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)],
        ['Pittsburgh Steelers',  new Date(2005, 8, 5), new Date(2006, 1, 5)],
        ['Indianapolis Colts',   new Date(2006, 8, 5), new Date(2007, 1, 5)],
        ['New York Giants',      new Date(2007, 8, 5), new Date(2008, 1, 5)],
        ['Pittsburgh Steelers',  new Date(2008, 8, 5), new Date(2009, 1, 5)],
        ['New Orleans Saints',   new Date(2009, 8, 5), new Date(2010, 1, 5)],
        ['Green Bay Packers',    new Date(2010, 8, 5), new Date(2011, 1, 5)],
        ['New York Giants',      new Date(2011, 8, 5), new Date(2012, 1, 5)],
        ['Baltimore Ravens',     new Date(2012, 8, 5), new Date(2013, 1, 5)],
        ['Seattle Seahawks',     new Date(2013, 8, 5), new Date(2014, 1, 5)],
      ]);

      var options = {
        height: 450,
        timeline: {
          groupByRowLabel: true
        }
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  

Fechas y horas con el constructor de fechas

El tipo de datos de la columna datetime de DataTable usa el mismo constructor de fecha que el tipo de datos date, pero ahora usa todos los argumentos para completar la hora.

Como alternativa, una representación de string de datetime también se puede pasar al constructor de fechas. Una representación de string de datetime consiste en agregar las horas, los minutos y los segundos, además del desplazamiento de la zona horaria de 4 dígitos (p.ej., la hora estándar del Pacífico (PST) es -0800). Para la especificación RFC 2822, la hora y la zona horaria se agregan con espacios entre la fecha y la hora, y la hora y la zona horaria. En la especificación ISO 8601, no hay espacios, sino que la fecha va seguida de una "T" mayúscula para indicar un componente de tiempo. Tampoco hay espacio entre la hora y la compensación de la zona horaria. La string completa de fecha datetime para el 6 de diciembre de 2014 a las 10:30 a.m. PST sería:

  • RFC 2822: Dec 6, 2014 10:30:00 -0800
  • ISO 8601: 2014-12-06T10:30:00-0800.

Advertencia: De nuevo, la representación de string puede analizarse de manera diferente según el navegador o la versión. En particular, cuando se trata de la hora y las zonas horarias, hay diferencias en si la fecha y la hora se muestra con una zona horaria UTC (GMT) o si se desplaza y se muestra en la hora local. Esta es otra razón por la que no se recomienda el uso de strings de fecha y hora.

En el siguiente cronograma, se desglosa un día promedio, con el tipo de datos de fecha y hora.

    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Activity', 'Start Time', 'End Time'],
        ['Sleep',
         new Date(2014, 10, 15, 0, 30),
         new Date(2014, 10, 15, 6, 30)],
        ['Eat Breakfast',
         new Date(2014, 10, 15, 6, 45),
         new Date(2014, 10, 15, 7)],
        ['Get Ready',
         new Date(2014, 10, 15, 7, 4),
         new Date(2014, 10, 15, 7, 30)],
        ['Commute To Work',
         new Date(2014, 10, 15, 7, 30),
         new Date(2014, 10, 15, 8, 30)],
        ['Work',
         new Date(2014, 10, 15, 8, 30),
         new Date(2014, 10, 15, 17)],
        ['Commute Home',
         new Date(2014, 10,  15, 17),
         new Date(2014, 10,  15, 18)],
        ['Gym',
         new Date(2014, 10, 15, 18),
         new Date(2014, 10,  15, 18, 45)],
        ['Eat Dinner',
         new Date(2014, 10,  15, 19),
         new Date(2014, 10,  15, 20)],
        ['Get Ready For Bed',
         new Date(2014, 10,  15, 21),
         new Date(2014, 10,  15, 22)]
      ]);

      var options = {
        height: 450,
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  

Fechas, horas y zonas horarias

Con el constructor de fechas, ya sea para date o datetime, se mostrará la fecha o la fecha y hora deseadas en la zona horaria establecida por el navegador del usuario. Puedes establecer tu objeto de fecha en una zona horaria específica de varias maneras. Primero, Google Charts proporciona un formateador de fechas en el que puedes especificar un timeZone. Esto proporcionará un valor con formato para cada uno de los valores de date y datetime de tu DataTable. También puedes pasar una string como argumento al constructor new Date() o puedes unir los argumentos en el método Date.UTC(), por ejemplo:

new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))

Esto establecerá un objeto de fecha en la fecha y hora especificadas en la zona horaria UTC (GMT). Desde allí, puedes calcular el desplazamiento deseado para la zona horaria y establecer tus fechas y horas como desees.

Fechas y horas con la representación de la string de fecha

Cuando serializas datos con la notación literal de objetos de DataTable de JavaScript para compilar datos, no se puede usar el constructor new Date(). En su lugar, los gráficos de Google proporcionan una representación de string de fecha que permite que date o datetime se serialicen y analicen de forma correcta cuando se crea un DataTable. Este formato de string de fecha simplemente descarta la palabra clave new y encierra la expresión restante entre comillas:

"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"

Importante: Cuando usas esta representación de string de fecha, como cuando se usa el constructor new Date(), los meses se indexan a partir de cero (enero es el mes 0, diciembre es el mes 11).

A continuación, se muestra el mismo cronograma del Super Bowl de antes, pero ahora se usa la notación literal de objeto JavaScript y el formato de string de fecha.

    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable({

        cols: [
          {id: 'team', label: 'Team', type: 'string'},
          {id: 'start', label: 'Season Start Date', type: 'date'},
          {id: 'end', label: 'Season End Date', type: 'date'}
        ],

        rows: [
          {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
          {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
          {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
          {c: [{v: 'Indianapolis Colts'},   {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
          {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
          {c: [{v: 'New Orleans Saints'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
          {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2011, 8, 5)'}, {v: 'Date(2012, 1, 5)'}]},
          {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2012, 8, 5)'}, {v: 'Date(2013, 1, 5)'}]},
          {c: [{v: 'Seattle Seahawks'},     {v: 'Date(2013, 8, 5)'}, {v: 'Date(2014, 1, 5)'}]}
        ]
      });

      var options = {
        height: 450,
        timeline: {
          groupByRowLabel: true
        }
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  

Este formato también se puede usar en el método arrayToDataTable(), siempre que en el primer arreglo, en el que se especifican las etiquetas de columnas, declares la columna necesaria como type: 'date' o type: 'datetime'.

var data = google.visualization.arrayToDataTable([
  ["Team", {type: 'date', label: 'Season Start Date'}, {type: 'date', label: 'Season End Date'}],
  ["Baltimore Ravens",     "Date(2000, 8, 5)", "Date(2001, 1, 5)"],
  ["New England Patriots", "Date(2001, 8, 5)", "Date(2002, 1, 5)"],
  ["Tampa Bay Buccaneers", "Date(2002, 8, 5)", "Date(2003, 1, 5)"],
  ["New England Patriots", "Date(2003, 8, 5)", "Date(2004, 1, 5)"],
  ["New England Patriots", "Date(2004, 8, 5)", "Date(2005, 1, 5)"],
  ["Pittsburgh Steelers",  "Date(2005, 8, 5)", "Date(2006, 1, 5)"],
  ["Indianapolis Colts",   "Date(2006, 8, 5)", "Date(2007, 1, 5)"],
  ["New York Giants",      "Date(2007, 8, 5)", "Date(2008, 1, 5)"],
  ["Pittsburgh Steelers",  "Date(2008, 8, 5)", "Date(2009, 1, 5)"],
  ["New Orleans Saints",   "Date(2009, 8, 5)", "Date(2010, 1, 5)"],
  ["Green Bay Packers",    "Date(2010, 8, 5)", "Date(2011, 1, 5)"],
  ["New York Giants",      "Date(2011, 8, 5)", "Date(2012, 1, 5)"],
  ["Baltimore Ravens",     "Date(2012, 8, 5)", "Date(2013, 1, 5)"],
  ["Seattle Seahawks",     "Date(2013, 8, 5)", "Date(2014, 1, 5)"]
]);
  

Cómo trabajar con Timeofday

El tipo de datos de la columna timeofday de DataTable toma un arreglo de 3 o 4 números, que representa horas, minutos, segundos y, opcionalmente, milisegundos, respectivamente. Usar timeofday es diferente de usar date y datetime en el sentido de que los valores no son específicos de una fecha, mientras que date y datetime siempre especifican una fecha.

Por ejemplo, la hora a las 8:30 a.m. sería: [8, 30, 0, 0]. El cuarto valor sería opcional ([8, 30, 0] generaría el mismo valor de hora del día).

    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Emails Received');

      data.addRows([
        [[8, 30, 45], 5],
        [[9, 0, 0], 10],
        [[10, 0, 0, 0], 12],
        [[10, 45, 0, 0], 13],
        [[11, 0, 0, 0], 15],
        [[12, 15, 45, 0], 20],
        [[13, 0, 0, 0], 22],
        [[14, 30, 0, 0], 25],
        [[15, 12, 0, 0], 30],
        [[16, 45, 0], 32],
        [[16, 59, 0], 42]
      ]);

      var options = {
        title: 'Total Emails Received Throughout the Day',
        height: 450
      };

      var chart = new google.charts.Bar(document.getElementById('chart_div'));

      chart.draw(data, google.charts.Bar.convertOptions(options));
    }
  

Formato de ejes, líneas de cuadrícula y etiquetas de marcas

Cuando se trabaja con fechas, fecha y hora, es posible que desees usar el formato de las etiquetas de eje, etiquetas de línea de cuadrícula o marcas de verificación de una manera determinada. Esto se puede lograr de varias maneras.

Primero, puedes usar la opción hAxis.format o vAxis.format. Esta opción se aplica cuando se omite la opción gridlines.count, en cuyo caso el gráfico se establece de forma predeterminada en un recuento de 5, así como cuando se establece en un número distinto de -1. Esto te permite especificar una string de formato, en la que usas letras de marcador de posición para diferentes partes de la fecha, la fecha y la hora del día. Consulta la referencia del formateador de fechas, específicamente la sección pattern para obtener más información sobre los marcadores de posición y su funcionamiento.

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Time of Day');
        data.addColumn('number', 'Rating');

        data.addRows([
          [new Date(2015, 0, 1), 5],  [new Date(2015, 0, 2), 7],  [new Date(2015, 0, 3), 3],
          [new Date(2015, 0, 4), 1],  [new Date(2015, 0, 5), 3],  [new Date(2015, 0, 6), 4],
          [new Date(2015, 0, 7), 3],  [new Date(2015, 0, 8), 4],  [new Date(2015, 0, 9), 2],
          [new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
          [new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
          [new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
          [new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
          [new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
          [new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
          [new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
          [new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7],  [new Date(2015, 1, 2), 9]
        ]);


        var options = {
          title: 'Rate the Day on a Scale of 1 to 10',
          width: 900,
          height: 500,
          hAxis: {
            format: 'M/d/yy',
            gridlines: {count: 15}
          },
          vAxis: {
            gridlines: {color: 'none'},
            minValue: 0
          }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

        var button = document.getElementById('change');

        button.onclick = function () {

          // If the format option matches, change it to the new option,
          // if not, reset it to the original format.
          options.hAxis.format === 'M/d/yy' ?
          options.hAxis.format = 'MMM dd, yyyy' :
          options.hAxis.format = 'M/d/yy';

          chart.draw(data, options);
        };
      }
  

También puedes proporcionar reglas de formato para unidades específicas de valores de fecha y hora si incluyes una opción units en gridlines y minorGridlines para ambos ejes. Esta opción solo se usará si la opción gridlines.count está configurada en -1.

La opción gridlines.units es un objeto, en el que se especifica el formato de los diferentes aspectos de la fecha, la hora y la hora del día para la línea de cuadrícula calculada, y el gráfico calcula las líneas de cuadrícula en función del primer formato que se ajuste al espacio de la etiqueta de línea de cuadrícula. Puedes configurar los formatos por años, meses, días, horas, minutos, segundos y milisegundos.

La opción de formato acepta un arreglo de formatos de strings y las usará en orden hasta que un formato se ajuste al área de la etiqueta. Por este motivo, se recomienda enumerar los formatos de mayor a menor. Los formatos de string usan los mismos patrones que la referencia del formateador de fechas antes mencionados.


Ten en cuenta que, en el gráfico anterior, cuando se cambia la ventana de vistas, cambia el formato de la unidad hours, dado que las horas cambian de líneas de cuadrícula menores a principales, y el formato de las opciones cambia con ellas. Además, ten en cuenta que minorGridlines usa los segundos formatos más cortos, ya que los primeros no se ajustan al espacio en cada instancia.

        hAxis: {
          viewWindow: {
            min: new Date(2014, 11, 31, 18),
            max: new Date(2015, 0, 3, 1)
          },
          gridlines: {
            count: -1,
            units: {
              days: {format: ['MMM dd']},
              hours: {format: ['HH:mm', 'ha']},
            }
          },
          minorGridlines: {
            units: {
              hours: {format: ['hh:mm:ss a', 'ha']},
              minutes: {format: ['HH:mm a Z', ':mm']}
            }
          }
        }
  

Más información sobre las fechas en JavaScript

Si deseas obtener más información sobre el objeto Date() de JavaScript, la red de desarrolladores de Mozilla es un excelente recurso. Allí, puedes obtener información sobre los objetos de fecha de JavaScript.