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. Menggunakan Timeofday
  6. Memformat Label Sumbu, Garis Petak, dan Centang
  7. Informasi Selengkapnya Tentang Tanggal JavaScript

Ringkasan

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

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

Tanggal dan Waktu Menggunakan Konstruktor Tanggal

Tanggal Menggunakan Konstruktor Tanggal

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

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

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

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

Menggunakan konstruktor Tanggal berguna saat menyusun 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 pada konstruktor Tanggal dapat diuraikan secara berbeda oleh browser dan versi browser yang berbeda, sehingga menampilkan tanggal yang berbeda untuk string yang sama. Oleh karena itu, tidak disarankan untuk meneruskan string ke konstruktor Tanggal. Sebagai gantinya, sebaiknya hanya gunakan angka untuk argumen konstruktor Tanggal.

Linimasa di bawah ini menampilkan juara Super Bowl di setiap musim NFL sejak tahun 2000.


Di bawah ini 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);
    }

Datetime Menggunakan Konstruktor Tanggal

Jenis data kolom datetime DataTable menggunakan konstruktor Tanggal yang sama seperti jenis data date, tetapi sekarang 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 di antara tanggal dan waktu, serta waktu dan zona waktu. Dalam spesifikasi ISO 8601, tidak ada spasi. Sebagai gantinya, tanggal diikuti dengan huruf "T" besar untuk menunjukkan komponen waktu. Selain itu, tidak ada spasi di 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. Secara khusus, saat menangani waktu dan zona waktu, ada perbedaan apakah tanggal dan waktu ditampilkan dengan zona waktu UTC (GMT), atau di-offset dan ditampilkan dalam waktu lokal. Ini adalah alasan lain mengapa penggunaan string datetime tidak direkomendasikan.

Linimasa di bawah ini memperinci rata-rata hari, menggunakan jenis data datetime. 

    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

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

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

Tindakan ini akan menetapkan objek Tanggal ke tanggal dan waktu yang ditentukan dalam zona waktu UTC (GMT). Dari sana, Anda dapat menghitung offset yang diinginkan untuk zona waktu serta menetapkan tanggal dan waktu sesuai keinginan.

Tanggal dan Waktu Menggunakan Representasi String Tanggal

Saat membuat serialisasi data menggunakan notasi literal objek DataTable JavaScript untuk membuat DataTable, konstruktor new Date() tidak dapat digunakan. Sebagai gantinya, Google Chart memberikan representasi string Tanggal yang memungkinkan date atau datetime Anda diserialisasi dan diurai dengan benar saat membuat DataTable. Format string Tanggal ini hanya meletakkan 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 dengan 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 dalam 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)"]
]);

Menggunakan Waktu

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

Misalnya, waktu pada pukul 08.30 akan menjadi: [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, Garis Petak, dan Centang

Saat menggunakan tanggal, tanggal, dan waktu, sebaiknya format label sumbu, label garis petak, atau label tick dengan cara tertentu. Hal ini dapat dicapai dengan beberapa cara.

Pertama, Anda dapat menggunakan opsi hAxis.format atau vAxis.format. Opsi ini berlaku jika opsi gridlines.count dihilangkan, yang dalam hal ini diagram secara default ditetapkan ke jumlah 5, serta jika opsi ditetapkan ke angka selain -1. Tindakan ini memungkinkan Anda menentukan string format, tempat Anda menggunakan huruf placeholder untuk berbagai bagian tanggal/datetime/waktu. Lihat referensi pemformat tanggal, khususnya bagian pattern untuk 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 memberikan aturan pemformatan untuk unit nilai tanggal dan 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/waktu untuk garis petak yang dihitung, dan diagram Anda akan menghitung garis petak berdasarkan format pertama yang sesuai dengan ruang untuk label garis petak. Anda dapat menyetel format untuk tahun, bulan, hari, jam, menit, detik, dan milidetik.

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


Perhatikan bahwa pada diagram di atas, saat mengubah jendela tampilan, format untuk unit hours akan berubah, mengingat jam berubah dari garis petak minor ke utama, dan format dalam opsi akan berubah sesuai dengannya. Selain itu, perhatikan bahwa minorGridline menggunakan format kedua yang lebih pendek, karena format pertama tidak sesuai dengan ruang dalam 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 Selengkapnya 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 hal tentang objek Tanggal JavaScript.