Ngày và giờ

  1. Tổng quan
  2. Ngày và giờ sử dụng hàm khởi tạo ngày
  3. Ngày, thời gian và múi giờ
  4. Ngày và giờ bằng cách biểu diễn chuỗi ngày
  5. Làm việc với Timeofday
  6. Định dạng trục, đường lưới và nhãn đánh dấu
  7. Thông tin khác về các ngày của JavaScript

Tổng quan

Các loại dữ liệu trong cột DataTable date và datetime sử dụng lớp Ngày JavaScript tích hợp sẵn.

Lưu ý quan trọng: Trong các đối tượng Ngày trong JavaScript, các tháng được lập chỉ mục bắt đầu từ 0 và tăng lên đến 11, trong đó tháng 1 là tháng 0 và tháng 12 là tháng 11.

Ngày và giờ sử dụng hàm khởi tạo ngày

Ngày sử dụng hàm khởi tạo ngày

Để tạo một đối tượng Ngày mới, bạn hãy gọi hàm khởi tạo Date() bằng từ khoá new, với các đối số để chỉ định các thành phần của ngày đó. Các đối số này có dạng một số số tương ứng với các thuộc tính khác nhau của ngày tháng. 

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

Khi sử dụng hàm khởi tạo Ngày với loại dữ liệu date, bạn chỉ cần chỉ định Năm, Tháng và Ngày.

Hàm khởi tạo Ngày cũng có thể có dạng: new Date(Milliseconds), trong đó Mili giây là khoảng cách tính bằng mili giây của ngày mong muốn từ ngày 1 tháng 1 năm 1970 00:00:00 giờ UTC. Đối với ngày và giờ trước ngày đó, giá trị mili giây sẽ được cung cấp.

Hàm khởi tạo Ngày sẽ rất hữu ích khi tạo DataTable theo cách thủ công bằng phương thức addColumn(), addRow() và addRows(), cũng như phương thức arrayToDataTable(). Tuy nhiên, nếu sử dụng JSON để chỉ định dữ liệu, thì bạn cần sử dụng tính năng biểu diễn chuỗi.

Hàm khởi tạo Ngày trong JavaScript cũng có thể chấp nhận một chuỗi biểu diễn ngày tháng làm đối số. Chuỗi này có thể ở nhiều dạng khác nhau. Các biểu mẫu đáng tin cậy nhất tuân thủ quy cách RFC 2822 hoặc quy cách ISO 8601. Các định dạng cho những sự kiện này bao gồm:

  • RFC 2822 — 'MMM DD, YYYY' hoặc 'DD MMM, YYYY' (Ví dụ: new Date('Jan 1, 2015') hoặc new Date('1 Jan, 2015'))
  • ISO 8601 — 'YYYY-MM-DD' (Ví dụ: new Date('2015-01-01'))

Cảnh báo: Cách trình bày chuỗi trong hàm khởi tạo Ngày có thể được phân tích cú pháp theo các trình duyệt và phiên bản trình duyệt khác nhau, do đó trả về các ngày khác nhau cho cùng một chuỗi. Do đó, bạn không nên truyền các chuỗi vào hàm khởi tạo Date (Ngày). Thay vào đó, bạn chỉ nên sử dụng số cho các đối số của hàm khởi tạo Ngày tháng.

Dòng thời gian dưới đây cho thấy nhà vô địch Super Bowl của mỗi mùa giải NFL kể từ năm 2000.


Dưới đây là mã để tạo tiến trình này. Hãy lưu ý đến việc sử dụng hàm khởi tạo new Date() và các số được cung cấp cho từng ngày, sử dụng tháng dựa trên 0 như đã đề cập trước đó. 

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

Ngày giờ sử dụng hàm khởi tạo ngày

Loại dữ liệu cột DataTable datetime sử dụng cùng một hàm khởi tạo Ngày như loại dữ liệu date, nhưng hiện sử dụng tất cả các đối số để điền thời gian.

Ngoài ra, một chuỗi biểu diễn datetime cũng có thể được truyền vào hàm khởi tạo Ngày. Một chuỗi biểu thị bằng datetime bao gồm dữ liệu thêm giờ, phút và giây, ngoài giá trị chênh lệch múi giờ gồm 4 chữ số (ví dụ: Giờ chuẩn Thái Bình Dương (PST) là -0800). Đối với thông số kỹ thuật RFC 2822, thời gian và múi giờ được thêm bằng dấu cách giữa ngày và giờ, cũng như giờ và múi giờ. Trong quy cách ISO 8601, không có dấu cách mà thay vào đó là ngày, theo sau là chữ "T" viết hoa để biểu thị thành phần thời gian. Ngoài ra, không có khoảng cách giữa thời gian và giá trị chênh lệch múi giờ. Chuỗi ngày datetime đầy đủ lúc 10:30 sáng (giờ chuẩn Thái Bình Dương) ngày 6 tháng 12 năm 2014 sẽ là:

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

Cảnh báo: Xin nhắc lại rằng cách trình bày chuỗi có thể được phân tích cú pháp theo cách khác nhau tuỳ theo trình duyệt/phiên bản. Điều đáng chú ý là khi xử lý thời gian và múi giờ, sẽ có sự khác biệt về việc ngày giờ được trả về theo múi giờ UTC (GMT) hoặc có được bù trừ và trả về theo giờ địa phương hay không. Đây là một lý do khác khiến bạn không nên sử dụng chuỗi ngày giờ.

Tiến trình bên dưới chia nhỏ một ngày trung bình, sử dụng kiểu dữ liệu ngày giờ. 

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

Ngày, thời gian và múi giờ

Việc sử dụng hàm khởi tạo Date (Ngày) cho date hoặc datetime sẽ trả về ngày hoặc ngày giờ mong muốn trong múi giờ do trình duyệt của người dùng đặt. Bạn có thể đặt đối tượng Ngày thành một múi giờ cụ thể theo một số cách. Trước tiên, Google Biểu đồ cung cấp một Trình định dạng ngày để bạn có thể chỉ định timeZone. Thao tác này sẽ cung cấp giá trị được định dạng cho mỗi giá trị date và datetime trong DataTable của bạn. Bạn cũng có thể truyền một chuỗi làm đối số tới hàm khởi tạo new Date() hoặc có thể gói các đối số trong phương thức Date.UTC(), chẳng hạn như: 

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

Thao tác này sẽ đặt đối tượng Ngày thành ngày và giờ được chỉ định theo múi giờ UTC (GMT). Từ đó, bạn có thể tính toán độ lệch mong muốn cho múi giờ cũng như đặt ngày và giờ theo ý muốn.

Ngày và giờ sử dụng giá trị biểu diễn chuỗi ngày

Khi chuyển đổi tuần tự dữ liệu bằng ký hiệu bằng chữ đối tượng DataTable JavaScript để tạo DataTable, bạn không thể sử dụng hàm khởi tạo new Date(). Thay vào đó, Google Biểu đồ cung cấp bản trình bày chuỗi Ngày cho phép date hoặc datetime của bạn được chuyển đổi tuần tự và phân tích cú pháp đúng cách khi tạo DataTable. Định dạng chuỗi Ngày này chỉ bỏ qua từ khoá new và gói biểu thức còn lại trong dấu ngoặc kép: 

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

Lưu ý quan trọng: Khi sử dụng cách biểu diễn chuỗi ngày này, cũng như khi sử dụng hàm khởi tạo new Date(), các tháng sẽ được lập chỉ mục bắt đầu từ 0 (tháng 1 là tháng 0, tháng 12 là tháng 11).

Dưới đây là dòng thời gian Super Bowl trước đó, nhưng hiện sử dụng ký hiệu bằng chữ đối tượng JavaScript và định dạng chuỗi Ngày. 

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

Bạn cũng có thể dùng định dạng này trong phương thức arrayToDataTable(), miễn là trong mảng đầu tiên (nơi chỉ định nhãn cột), bạn phải khai báo cột cần thiết là type: 'date' hoặc 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)"]
]);

Làm việc với Thời gian trong ngày

Loại dữ liệu cột DataTable timeofday lấy một mảng gồm 3 hoặc 4 số, lần lượt đại diện cho giờ, phút, giây và mili giây (không bắt buộc). Việc sử dụng timeofday khác với việc sử dụng date và datetime ở chỗ các giá trị không cụ thể cho một ngày, trong khi date và datetime luôn chỉ định một ngày.

Ví dụ: thời gian 8:30 sáng sẽ là: [8, 30, 0, 0], trong đó giá trị thứ 4 là không bắt buộc ([8, 30, 0] sẽ cho ra cùng một giá trị thời gian trong ngày). 

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

Định dạng trục, đường lưới và nhãn đánh dấu

Khi làm việc với ngày, ngày giờ và thời gian trong ngày, bạn có thể định dạng nhãn trục, nhãn đường lưới hoặc nhãn đánh dấu nhịp độ khung hình theo một cách nhất định. Điều này có thể đạt được bằng một vài cách.

Trước tiên, bạn có thể sử dụng tuỳ chọn hAxis.format hoặc vAxis.format. Tuỳ chọn này áp dụng khi bạn bỏ qua tuỳ chọn gridlines.count. Trong trường hợp đó, biểu đồ sẽ mặc định đếm số lượng là 5, cũng như khi bạn đặt số lượng không phải là -1. Thao tác này cho phép bạn chỉ định một chuỗi định dạng, trong đó bạn sử dụng chữ cái giữ chỗ cho nhiều phần trong ngày/ngày/giờ trong ngày. Hãy xem tài liệu tham khảo về trình định dạng ngày, cụ thể là phần pattern để biết thêm thông tin về phần giữ chỗ và cách hoạt động của các trình này. 

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

Bạn cũng có thể cung cấp quy tắc định dạng cho các đơn vị giá trị ngày và giờ cụ thể bằng cách thêm tuỳ chọn units trong gridlines và minorGridlines cho cả hai trục. Tuỳ chọn này chỉ được dùng nếu bạn đặt tuỳ chọn gridlines.count thành -1.

Tuỳ chọn gridlines.units là một đối tượng, trong đó bạn chỉ định định dạng cho các khía cạnh khác nhau của ngày/ngày/giờ trong ngày đối với đường lưới đã tính toán và biểu đồ của bạn sẽ tính toán đường lưới dựa trên định dạng đầu tiên phù hợp với không gian của nhãn đường lưới. Bạn có thể đặt định dạng cho năm, tháng, ngày, giờ, phút, giây và mili giây.

Tuỳ chọn định dạng này chấp nhận một mảng định dạng chuỗi và sẽ sử dụng các định dạng đó theo thứ tự cho đến khi một định dạng phù hợp với vùng nhãn. Vì lý do này, bạn nên liệt kê các định dạng theo thứ tự từ dài nhất đến ngắn nhất. Các định dạng chuỗi sử dụng cùng một mẫu như tài liệu tham khảo về trình định dạng ngày đã đề cập trước đó.


Xin lưu ý rằng trong biểu đồ trên, khi thay đổi cửa sổ chế độ xem, định dạng của đơn vị hours sẽ thay đổi vì giờ đó sẽ chuyển từ đường lưới nhỏ sang lớn và định dạng trong các tuỳ chọn cũng thay đổi theo. Ngoài ra, hãy lưu ý rằng subGridlines đang sử dụng định dạng thứ hai ngắn hơn, vì các định dạng đầu tiên không phù hợp với không gian trong mỗi thực thể. 

        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']}
            }
          }
        }

Thông tin khác về ngày JavaScript

Nếu bạn muốn tìm hiểu thêm về đối tượng Date() của JavaScript, thì Mạng Nhà phát triển Mozilla là một tài nguyên hữu ích. Tại đó, bạn có thể tìm hiểu tất cả về các đối tượng Ngày JavaScript.