Fechas y horas

Stay organized with collections Save and categorize content based on your preferences.

Descripción general

Los tipos de datos de las columnas date y datetime de DataTable 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, y enero es el mes 0, y diciembre, el mes 11.

Fechas y horas con el constructor de fechas

Fechas con el constructor de fechas

Para crear un objeto de fecha nuevo, 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 correspondientes a las diferentes propiedades de la fecha.

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

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

El constructor de fecha también puede adoptar el formato 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.

El uso del constructor de fecha es útil cuando se construye de forma manual tu DataTable con los métodos addColumn(), addRow() y addRows(), así como con el método arrayToDataTable(). Sin embargo, si se usa 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 argumento. Esta string puede adoptar varias formas. Los formularios más confiables se ajustan a la especificación RFC 2822 o a la especificación ISO 8601. Los formatos son los siguientes:

  • 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 strings en el constructor de fechas puede ser analizada de manera diferente por navegadores y versiones de navegadores distintos, lo que muestra fechas diferentes para la misma string. Por lo tanto, no se recomienda pasar strings al constructor de la fecha. En cambio, 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.

      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 utilizará si la opción gridlines.count se establece en -1.

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

La opción de formato acepta un arreglo de formatos de string y los 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 mencionado.