Tanggal dan Waktu

  1. Ringkasan
  2. Tanggal dan Waktu Menggunakan Konstruktor Tanggal
  3. Tanggal, Waktu, dan Zona Waktu
  4. Tanggal dan Waktu Menggunakan Representasi String Tanggal
  5. Menangani Waktu
  6. Memformat Label Sumbu, Petak, dan Centang
  7. Informasi Selengkapnya tentang Tanggal JavaScript

Ringkasan

Jenis data kolom DataTable date dan datetime menggunakan class Tanggal JavaScript bawaan.

Penting: Pada objek Tanggal JavaScript, bulan diindeks mulai dari nol dan naik hingga sebelas, dengan Januari menjadi bulan 0 dan Desember menjadi bulan 11.

Tanggal dan Waktu Menggunakan Konstruktor Tanggal

Tanggal Menggunakan Konstruktor Tanggal

Untuk membuat objek Tanggal baru, panggil konstruktor Date() dengan kata kunci new, dengan argumen untuk menentukan komponen tanggal. Argumen ini berbentuk beberapa angka yang sesuai dengan properti yang berbeda dari tanggal Anda. 

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

Saat menggunakan konstruktor Tanggal dengan jenis data date, Anda hanya perlu menentukan Tahun, Bulan, dan Hari.

Konstruktor Tanggal juga dapat berbentuk: new Date(Milliseconds), dengan Milidetik adalah jarak dalam milidetik dari tanggal yang diinginkan dari 1 Januari 1970 00:00:00 UTC. Untuk tanggal dan waktu sebelum tanggal tersebut, jumlah negatif Milidetik akan diberikan.

Menggunakan konstruktor Tanggal akan berguna saat membuat DataTable secara manual menggunakan metode addColumn(), addRow(), dan addRows(), serta metode arrayToDataTable(). Namun, jika menggunakan JSON untuk menentukan data, representasi string harus digunakan.

Konstruktor Tanggal JavaScript juga dapat menerima representasi string dari tanggal sebagai argumen. String ini dapat memiliki beberapa bentuk yang berbeda. Formulir yang paling andal sesuai dengan spesifikasi RFC 2822 atau spesifikasi ISO 8601. Formatnya adalah:

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

Peringatan: Representasi string di konstruktor Tanggal dapat diuraikan secara berbeda oleh browser dan versi browser yang berbeda pula, sehingga menampilkan tanggal yang berbeda untuk string yang sama. Karena itu, tidak disarankan meneruskan string ke konstruktor Tanggal. Sebagai gantinya, sebaiknya hanya gunakan angka untuk argumen konstruktor Tanggal.

Linimasa di bawah menunjukkan juara Super Bowl dari setiap musim NFL sejak tahun 2000.


Berikut adalah kode untuk membuat linimasa ini. Perhatikan penggunaan konstruktor new Date(), dan angka yang diberikan untuk setiap tanggal, menggunakan bulan berbasis 0 seperti yang disebutkan sebelumnya. 

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

Tanggal dan Waktu menggunakan Konstruktor Tanggal

Jenis data kolom datetime DataTable menggunakan konstruktor Tanggal yang sama seperti jenis data date, tetapi kini menggunakan semua argumen untuk mengisi waktu.

Atau, representasi string dari datetime juga dapat diteruskan ke konstruktor Tanggal. Representasi string datetime terdiri dari penambahan jam, menit, dan detik, selain offset zona waktu 4 digit (misalnya, Waktu Standar Pasifik (PST) adalah -0800). Untuk spesifikasi RFC 2822, waktu dan zona waktu ditambahkan dengan spasi antara tanggal dan waktu, serta waktu dan zona waktu. Dalam spesifikasi ISO 8601, tidak ada spasi, tanggal diikuti dengan huruf besar "T" untuk menunjukkan komponen waktu. Juga tidak ada spasi antara waktu dan selisih zona waktu. String tanggal datetime lengkap untuk 6 Desember 2014 pukul 10.30 PST adalah:

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

Peringatan: Sekali lagi, representasi string dapat diuraikan secara berbeda oleh browser/versi yang berbeda. Khususnya, saat menangani waktu dan zona waktu, ada perbedaan apakah tanggal waktu ditampilkan dengan zona waktu UTC (GMT), atau diimbangi dan dikembalikan dalam waktu lokal. Ini adalah alasan lain mengapa penggunaan string tanggal/waktu tidak direkomendasikan.

Linimasa di bawah menguraikan hari rata-rata, menggunakan jenis data tanggal dan waktu. 

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

Tanggal, Waktu, dan Zona Waktu

Menggunakan konstruktor Tanggal, baik untuk date atau datetime, akan menampilkan tanggal atau tanggal/waktu yang diinginkan dalam zona waktu yang ditetapkan oleh browser pengguna. Menetapkan objek Tanggal ke zona waktu tertentu dapat dilakukan dalam beberapa cara. Pertama, Google Chart menyediakan Pemformat Tanggal tempat Anda dapat menentukan timeZone. Tindakan ini akan memberikan nilai berformat untuk setiap nilai date dan datetime di DataTable. Anda juga dapat meneruskan string sebagai argumen ke konstruktor new Date(), atau Anda dapat menggabungkan argumen dalam metode Date.UTC(), seperti: 

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

Ini akan menetapkan objek Tanggal ke tanggal dan waktu yang ditentukan dalam zona waktu UTC (GMT). Dari sana, Anda dapat menghitung selisih yang diinginkan untuk zona waktu dan menetapkan tanggal serta waktu yang diinginkan.

Tanggal dan Waktu Menggunakan Representasi String Tanggal

Saat melakukan serialisasi data menggunakan notasi literal objek DataTable JavaScript untuk membuat DataTable, konstruktor new Date() tidak dapat digunakan. Sebagai gantinya, Google Chart menyediakan representasi string Tanggal yang memungkinkan date atau datetime Anda diserialisasi dan diurai dengan benar saat membuat DataTable. Format string Tanggal ini hanya menghapus kata kunci new dan menggabungkan ekspresi yang tersisa dalam tanda kutip: 

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

Penting: Saat menggunakan Representasi String Tanggal ini, seperti saat menggunakan konstruktor new Date(), bulan diindeks mulai dari nol (Januari adalah bulan 0, Desember adalah bulan 11).

Di bawah ini adalah linimasa Super Bowl yang sama dari sebelumnya, tetapi sekarang menggunakan notasi literal objek JavaScript dan format string Tanggal. 

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

Format ini juga dapat digunakan dalam metode arrayToDataTable(), asalkan di array pertama, tempat label kolom ditentukan, Anda mendeklarasikan kolom yang diperlukan sebagai type: 'date' atau 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)"]
]);

Bekerja dengan Waktu

Jenis data kolom timeofday DataTable menggunakan array yang terdiri dari 3 atau 4 angka, yang masing-masing mewakili jam, menit, detik, dan milidetik (opsional). Penggunaan timeofday berbeda dengan penggunaan date dan datetime karena nilainya tidak spesifik untuk tanggal, sedangkan date dan datetime selalu menentukan tanggal.

Misalnya, waktu 08.30 adalah: [8, 30, 0, 0], dengan nilai ke-4 bersifat opsional ([8, 30, 0] akan menghasilkan nilai waktu yang sama). 

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

Memformat Label Sumbu, Petak, dan Centang

Saat menggunakan tanggal, tanggal/waktu, dan waktu, sebaiknya format label sumbu, label garis kisi, atau label centang dengan cara tertentu. Hal ini dapat dilakukan dengan beberapa cara.

Pertama, Anda dapat menggunakan opsi hAxis.format atau vAxis.format. Opsi ini berlaku jika opsi gridlines.count dihilangkan, dalam hal ini, diagram ditetapkan secara default ke jumlah 5, serta jika ditetapkan ke angka selain -1. Hal ini memungkinkan Anda menentukan string format, tempat Anda menggunakan huruf placeholder untuk berbagai bagian tanggal/tanggal/waktu. Lihat referensi pemformat tanggal, khususnya bagian pattern untuk mengetahui informasi selengkapnya tentang placeholder dan cara kerjanya. 

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

Anda juga dapat menyediakan aturan pemformatan untuk unit tanggal dan nilai waktu tertentu dengan menyertakan opsi units di bagian gridlines dan minorGridlines untuk kedua sumbu. Opsi ini hanya akan digunakan jika opsi gridlines.count ditetapkan ke -1.

Opsi gridlines.units adalah objek, tempat Anda menentukan format untuk berbagai aspek tanggal/tanggal/waktu untuk garis petak yang dihitung, dan diagram Anda akan menghitung garis kisi berdasarkan format pertama yang sesuai dengan ruang untuk label garis kisi. Anda dapat menyetel format untuk tahun, bulan, hari, jam, menit, detik, dan milidetik.

Opsi format menerima array format string, dan akan menggunakannya secara berurutan sampai format tersebut sesuai dengan area label. Oleh karena itu, sebaiknya buat daftar format dengan urutan dari yang terpanjang hingga terpendek. Format string menggunakan pola yang sama dengan referensi pemformat tanggal yang disebutkan sebelumnya.


Perlu diperhatikan bahwa pada diagram di atas, saat mengubah jendela tampilan, format untuk unit hours akan berubah, dengan mempertimbangkan perubahan jam dari garis kecil ke garis kisi utama, dan format dalam opsi akan berubah. Selain itu, perhatikan bahwa minorGridline menggunakan format kedua yang lebih pendek, karena format pertama tidak sesuai dengan ruang di setiap instance. 

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

Informasi Lebih Lanjut tentang Tanggal JavaScript

Jika Anda ingin mempelajari objek Date() JavaScript lebih lanjut, Mozilla Developer Network adalah referensi yang bagus. Di sana, Anda dapat mempelajari semua objek Tanggal JavaScript.