التواريخ والأوقات

  1. نظرة عامة
  2. التواريخ والأوقات باستخدام "أداة إنشاء التاريخ"
  3. التواريخ والأوقات والمناطق الزمنية
  4. التواريخ والأوقات التي تستخدم تمثيل سلسلة التاريخ
  5. العمل باستخدام Timeofday
  6. محاور التنسيق وخطوط الشبكة وعلامات التسّوق
  7. مزيد من المعلومات حول تواريخ JavaScript

نظرة عامة

يستخدِم نوعا البيانات في العمودين date وdatetime في جدول البيانات فئة تاريخ JavaScript المضمّنة.

ملاحظة مهمة: في كائنات JavaScript بتاريخ، تتم فهرسة الأشهر بدءًا من الصفر وترتفع حتى الحادية عشرة، ويكون كانون الثاني (يناير) الشهر 0 وكانون الأول (ديسمبر) هو الشهر 11.

التواريخ والأوقات باستخدام أداة إنشاء التاريخ

التواريخ باستخدام أداة إنشاء التاريخ

لإنشاء كائن التاريخ الجديد، يمكنك استدعاء دالة الإنشاء Date() باستخدام الكلمة الرئيسية new، مع وسيطات لتحديد مكونات التاريخ. وتكون هذه الوسيطات على شكل عدة أرقام متوافقة مع الخصائص المختلفة لتاريخك. 

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

عند استخدام "أداة إنشاء التاريخ" مع نوع البيانات date، ما عليك سوى تحديد السنة والشهر واليوم.

يمكن أن يتّبع دالة إنشاء التاريخ أيضًا الصيغة التالية: new Date(Milliseconds)، حيث تمثل ملي ثانية هي المدة بالملي ثانية من التاريخ المطلوب بدءًا من 1 كانون الثاني (يناير) 1970 الساعة 00:00:00 حسب التوقيت العالمي المُنسّق. وبالنسبة إلى التواريخ والأوقات التي تسبق ذلك التاريخ، سيتم توفير عدد سالب بالمللي ثانية.

ويُعدّ استخدام أداة إنشاء التاريخ مفيدًا عند إنشاء جدول البيانات يدويًا باستخدام الطرق addColumn() وaddRow() وaddRows()، بالإضافة إلى طريقة arrayToDataTable(). ومع ذلك، إذا كنت تستخدم JSON لتحديد البيانات، يجب استخدام تمثيل السلسلة.

يمكن أيضًا لأداة إنشاء تاريخ JavaScript قبول تمثيل التاريخ كوسيطة كوسيطة. يمكن أن تتخذ هذه السلسلة عدة أشكال مختلفة. تتوافق النماذج الأكثر موثوقية مع مواصفات RFC 2822 أو مواصفات ISO 8601. وتكون التنسيقات التالية:

  • RFC 2822 — 'MMM DD, YYYY' أو 'DD MMM, YYYY' (مثال: new Date('Jan 1, 2015') أو new Date('1 Jan, 2015'))
  • ISO 8601 — 'YYYY-MM-DD' (مثال: new Date('2015-01-01'))

تحذير: قد يتم تحليل تمثيل السلسلة في أداة إنشاء التاريخ بشكل مختلف من خلال المتصفحات المختلفة وإصدارات مختلفة من المتصفحات، وبالتالي عرض تواريخ مختلفة للسلسلة نفسها. وبناءً على ذلك، لا يُنصح بتمرير السلاسل إلى دالة إنشاء التاريخ. بدلاً من ذلك، يُوصى باستخدام الأرقام لوسيطات دالة إنشاء التاريخ فقط.

يعرض المخطط الزمني أدناه بطل دوري كرة القدم الأمريكية لكل موسم من مباريات دوري كرة القدم الأمريكية منذ عام 2000.


في ما يلي رمز إنشاء هذا المخطط الزمني. يُرجى الاطّلاع على طريقة استخدام آلات الإنشاء new Date() والأرقام المُحدّدة لكل تاريخ، باستخدام الأشهر المستندة إلى 0 كما ورد سابقًا. 

    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 جدول البيانات نفس دالة إنشاء التاريخ كما هو الحال مع نوع بيانات date، ولكنه الآن يستخدم جميع الوسيطات لملء الوقت.

بدلاً من ذلك، يمكن أيضًا تمرير تمثيل سلسلة datetime إلى دالة إنشاء التاريخ. يتكون تمثيل السلسلة لـ datetime من إضافة الساعات والدقائق والثواني، بالإضافة إلى معادلة المنطقة الزمنية المكوّنة من 4 أرقام (مثل توقيت المحيط الهادئ (PST) هو -0800). بالنسبة إلى مواصفات RFC 2822، تتم إضافة الوقت والمنطقة الزمنية بمسافات بين التاريخ والوقت، والوقت والمنطقة الزمنية. في مواصفات ISO 8601، ما مِن مسافات، يتّبع التاريخ حرف "T" كبير للإشارة إلى مكوّن الوقت. ما مِن مسافة أيضًا بين معادلة الوقت والمنطقة الزمنية. في ما يلي سلسلة التاريخ datetime الكاملة التي تم إجراؤها في 6 كانون الأول (ديسمبر) 2014 في تمام الساعة 10:30 صباحًا بتوقيت المحيط الهادئ:

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

تحذير: مرة أخرى، قد يتم تحليل تمثيل السلسلة بشكل مختلف من خلال المتصفحات/الإصدارات المختلفة. ملاحظة: عند التعامل مع المناطق الزمنية والمناطق الزمنية، تختلف الاختلافات في ما إذا كان يتم عرض التاريخ والوقت مع التوقيت الزمني لتوقيت غرينيتش (UTC)، أم أنه تتم التعويض عنه وعرضه بالتوقيت المحلي. وهذا سبب آخر يجعل استخدام سلاسل التاريخ والوقت غير مستحسن.

يُقسِّم المخطط الزمني التالي يومًا عاديًا باستخدام نوع البيانات "التاريخ والوقت". 

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

التواريخ والأوقات والمناطق الزمنية

باستخدام أداة إنشاء التاريخ، سواء باستخدام date أو datetime، سيتم عرض التاريخ أو التاريخ والوقت المطلوبين في المنطقة الزمنية التي يحدّدها متصفّح المستخدم. يمكن ضبط كائن التاريخ على منطقة زمنية محدّدة بعدة طرق. أولاً، توفّر "قوائم الأغاني الرائجة من Google" منسق التاريخ حيث يمكنك تحديد timeZone. سيؤدي ذلك إلى توفير قيمة منسّقة لكل من قيمتَي date وdatetime في جدول البيانات. يمكنك أيضًا تمرير سلسلة كوسيطة إلى دالة إنشاء new Date()، أو يمكنك التفاف الوسيطات بالطريقة Date.UTC()، مثل: 

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

سيؤدي هذا إلى تعيين كائن التاريخ إلى التاريخ والوقت المحددين في المنطقة الزمنية للتوقيت العالمي المنسق (UTC). من هناك، يمكنك حساب الإزاحة المطلوبة للمنطقة الزمنية وتعيين التواريخ والأوقات كما تريد.

التواريخ والأوقات التي تستخدم تمثيل سلسلة التاريخ

عند إنشاء بيانات متسلسلة باستخدام الترميز الحرفي لكائن DataTable من JavaScript لإنشاء جدول البيانات، لا يمكن استخدام دالة إنشاء new Date(). وبدلاً من ذلك، توفّر "مخطّطات Google" تمثيلاً لسلسلة التاريخ التي تسمح بتسلسل date أو datetime وتحليلها بشكل صحيح عند إنشاء جدول بيانات. يؤدي تنسيق سلسلة التاريخ ببساطة إلى إفلات الكلمة الرئيسية new والتفاف التعبير المتبقي بين علامات الاقتباس: 

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

ملاحظة مهمة: عند استخدام تمثيل سلسلة التاريخ هذا، كما هو الحال عند استخدام دالة الإنشاء new Date()، تتم فهرسة الأشهر بدءًا من الصفر (كانون الثاني (يناير) الشهر 0، كانون الأول (ديسمبر) الشهر 11).

في ما يلي المخطط الزمني نفسه لدوري Super Bowl من قبل، ولكنه يستخدم الآن الترميز الحرفي لكائن JavaScript وتنسيق سلسلة التاريخ. 

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

يمكن استخدام هذا التنسيق أيضًا في طريقة arrayToDataTable()، بشرط أن تشير في المصفوفة الأولى، حيث يتم تحديد تصنيفات الأعمدة، إلى أن العمود اللازم هو type: 'date' أو 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)"]
]);

العمل مع Timeofday

يأخذ نوع بيانات العمود timeofday في جدول البيانات مصفوفة من 3 أو 4 أرقام، تمثّل الساعات والدقائق والثواني والمللي ثانية اختياريًا، على التوالي. يختلف استخدام timeofday عن استخدام date وdatetime في أن القيمتين لا ترتبطان بتاريخ محدّد، في حين تحدد date وdatetime تاريخًا دائمًا.

على سبيل المثال، ستكون الساعة 8:30 صباحًا: [8, 30, 0, 0]، مع القيمة الرابعة بشكل اختياري (سينتج عن الدالة [8, 30, 0] قيمة الوقت من نفس اليوم). 

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

محور التنسيق وخط الشبكة وتسميات العلامات

عند التعامل مع التواريخ والتاريخ والوقت والوقت، قد يكون من المفيد تنسيق تصنيفات المحور أو تصنيفات خطوط الشبكة أو تصنيفات المؤشرات بطريقة معيّنة. ويمكن تحقيق ذلك بعدة طرق.

أولاً، يمكنك استخدام الخيار hAxis.format أو vAxis.format. ينطبق هذا الخيار عند إسقاط الخيار gridlines.count، وفي هذه الحالة يتم ضبط الرسم البياني على العدد 5 تلقائيًا، وعند ضبطه على رقم آخر غير -1. ويسمح لك ذلك بتحديد سلسلة تنسيق تستخدم فيها أحرفًا نائبة لأجزاء مختلفة من التاريخ/التاريخ والوقت/الوقت. يمكنك الرجوع إلى مرجع منسق التاريخ، وتحديدا قسم pattern للحصول على مزيد من المعلومات حول العناصر النائبة وكيفية عملها. 

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

يمكنك أيضًا تقديم قواعد تنسيق لوحدات معيّنة من قيم التاريخ والوقت عن طريق تضمين خيار units ضمن gridlines وminorGridlines لكلا محوري البيانات. سيتم استخدام هذا الخيار فقط إذا تم ضبط الخيار gridlines.count على -1.

إنّ الخيار gridlines.units هو كائن، حيث يمكنك تحديد التنسيق للجوانب المختلفة من التاريخ/التاريخ والوقت/timedayday لخط الشبكة الذي تم حسابه، وسيحسب الرسم البياني خطوط الشبكة استنادًا إلى التنسيق الأول الذي يناسب المساحة لتصنيف خط الشبكة. يمكنك تعيين التنسيقات للأعوام والأشهر والأيام والساعات والدقائق والثواني والمللي ثانية.

يقبل خيار التنسيق مصفوفة من تنسيقات السلاسل وسيستخدمها بالترتيب حتى يتناسب التنسيق مع منطقة التصنيف. لهذا السبب، ننصحك بإدراج التنسيقات بالترتيب من الأطول إلى الأقصر. تستخدم تنسيقات السلسلة الأنماط نفسها التي يستخدمها مرجع منسق التاريخ المشار إليه سابقًا.


تجدر الإشارة إلى أنّه في تغيير نافذة العرض في الرسم البياني أعلاه، يتغيّر تنسيق وحدة hours، بسبب تحوّل ساعات العمل من خطوط الشبكة الرئيسية إلى خطوط الشبكة الرئيسية، وتغير تنسيق الخيارات معها. وتجدر الإشارة أيضًا إلى أنّ خطوط الشبكة الثانوية تستخدم التنسيقات الثانية الأقصر، لأنّ التنسيقات الأولى لا تتناسب مع المساحة في كل مثيل. 

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

مزيد من المعلومات حول تواريخ JavaScript

إذا كنت ترغب في معرفة المزيد حول كائن JavaScript Date()، فإن شبكة Mozilla Developer تعد موردًا رائعًا. يمكنك الاطّلاع هناك على المزيد من المعلومات حول كائنات تاريخ JavaScript.