תאריכים ושעות

  1. סקירה כללית
  2. תאריכים ושעות באמצעות הכלי לבניית תאריכים
  3. תאריכים, שעות ואזורי זמן
  4. תאריכים ושעות באמצעות ייצוג של מחרוזת תאריך
  5. עבודה עם Timeofday
  6. עיצוב של תוויות צירים, קווי רשת ו שנתות
  7. מידע נוסף על תאריכי JavaScript

סקירה כללית

סוגי הנתונים בעמודה date ו-datetime DataTable משתמשים בסיווג התאריכים המובנה של JavaScript.

חשוב לדעת: באובייקטים של JavaScript בתאריך, חודשים נוספים באינדקס ומתחילים ב-11 ומטה. החודש הראשון הוא 0 ו-11 בדצמבר.

תאריכים ושעות באמצעות הכלי לבניית תאריכים

תאריכים באמצעות בונה התאריכים

כדי ליצור אובייקט Date חדש, צריך לקרוא לבנאי Date() עם מילת המפתח new ולארגומנטים כדי לציין את רכיבי התאריך. הארגומנטים האלה נוצרים בצורה של כמה מספרים המתאימים למאפיינים השונים של התאריך. 

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

כשמשתמשים בבנאי התאריכים עם סוג הנתונים date, צריך לציין רק את השנה, החודש והיום.

בנאי התאריך יכול להיות גם בפורמט הבא: new Date(Milliseconds), שבו האלפיות השנייה היא המרחק באלפיות השנייה של התאריך הרצוי, מ-1 בינואר 1970 00:00:00 UTC. עבור תאריכים ושעות לפני התאריך הזה, יצוין מספר שלילי של אלפיות השנייה.

מומלץ להשתמש בבונה התאריכים כדי ליצור ידנית את ה-DataTable באמצעות השיטות addColumn(), addRow() ו-addRows(), וגם באמצעות השיטה arrayToDataTable(). עם זאת, אם משתמשים ב-JSON כדי לציין נתונים, צריך להשתמש בייצוג מחרוזת.

גם ה-build של תאריך 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'))

אזהרה: אפשר לנתח את ייצוג המחרוזת בבונה התאריכים באמצעות דפדפנים שונים וגרסאות שונות של דפדפנים, וכך להחזיר תאריכים שונים לאותה מחרוזת. לכן, לא מומלץ להעביר את המחרוזת בבנייה לתאריך. במקום זאת, מומלץ להשתמש במספרים בלבד עבור הארגומנטים של בנאי התאריך.

ציר הזמן הבא מציג את אלוף הסופרבול בכל עונת ה-NFL מאז שנת 2000.


בהמשך מופיע הקוד ליצירת ציר הזמן הזה. חשוב לשים לב לשימוש בבנאים של new Date() ובמספרים שניתנים לכל תאריך, על בסיס חודשים ללא בסיס, כפי שצוין קודם לכן. 

    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 DataTable משתמש באותו בנאי תאריכים כמו סוג הנתונים date, אבל המערכת משתמשת עכשיו בכל הארגומנטים כדי למלא את נתוני הזמן.

לחלופין, אפשר להעביר ייצוג מחרוזת של datetime אל תוך בנאי התאריכים. ייצוג מחרוזת של datetime כולל הוספת השעות, הדקות והשניות, בנוסף להיסט של 4 ספרות (לדוגמה, שעון החוף המערבי הוא 0800-). במפרט של RFC 2822, השעה ואזור הזמן מתווספים עם רווחים בין התאריך והשעה, בין השעה לבין אזור הזמן. במפרט ISO 8601, אין רווחים. במקום זאת, התאריך מופיע אחרי 'T' באותיות גדולות, כדי לציין רכיב זמן. כמו כן, אין רווח בין הזמן לקיזוז אזור הזמן. מחרוזת התאריך המלאה של datetime עבור התאריך 6 בדצמבר 2014, בשעה 10:30 (שעון PST), היא:

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

אזהרה: שוב ייתכן שניתוח נתוני ייצוג המחרוזות יתבצע בצורה שונה בדפדפנים/גרסאות שונים. חשוב לשים לב כי בהתמודדות עם שעה ואזורי זמן, יש הבדלים בין החזרה של התאריך האחרון לבין אזור הזמן UTC (GMT) או של ההתאמה שלו לשעון המקומי. זו סיבה נוספת לכך שאסור להשתמש במחרוזות של תאריך ושעה.

בציר הזמן שלמטה מוצג פירוט של יום ממוצע, לפי סוג הנתונים של התאריך והשעה. 

    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 ב-DataTable. ניתן גם להעביר מחרוזת כארגומנט לבנאי new Date(). לחלופין, ניתן להקיף את הארגומנטים בשיטה Date.UTC(), למשל: 

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

פעולה זו תגדיר אובייקט מסוג תאריך ושעה לפי אזור הזמן UTC (GMT). מכאן אפשר לחשב את ההיסט הרצוי לאזור הזמן ולהגדיר את התאריכים והשעות לפי הצורך.

תאריכים ושעות באמצעות ייצוג מחרוזת מחרוזת

כשמבצעים סידור של נתונים באמצעות הייצוג המילולי של אובייקט DataTable כדי לבנות את ה-DataTable, לא ניתן להשתמש בבנאי new Date(). במקום זאת, התרשימים של Google מספקים ייצוג של מחרוזת תאריך, שמאפשר לסדר את הנתונים של date או של datetime בצורה נכונה ולנתח אותם כשיוצרים DataTable. פורמט המחרוזת בתאריך פשוט משחרר את מילת המפתח new ועוטף את הביטוי שנותר במירכאות: 

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

חשוב: כשמשתמשים בייצוג זה של מחרוזת התאריך, כמו כשמשתמשים בבנייה new Date(), חודשים נוספים לאינדקס החל מאפס (ינואר הוא חודש 0, דצמבר הוא חודש 11).

בהמשך מופיע אותו ציר זמן של הסופרבול מהעבר, אבל עכשיו נעשה שימוש בייצוג המילולי של אובייקט 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 DataTable מורכב מערך של 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-. כך אפשר לציין מחרוזת פורמט שבה צריך להשתמש באותיות placeholder עבור חלקים שונים של התאריך/השעה/השעה/השעה. למידע נוסף על ה-placeholders ועל אופן הפעולה שלהם, אפשר לעיין במפורמט התאריך. באופן ספציפי, הקטע 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 היא אובייקט. בשדה הזה מציינים את הפורמט של ההיבטים השונים של התאריך/התאריך/השעה של הרשת, והתרשים יחושב על ידי קווי הרשת על סמך הפורמט הראשון שמתאים לשטח בתווית. אפשר להגדיר את הפורמטים לשנים, חודשים, ימים, שעות, דקות, שניות ואלפיות שנייה.

האפשרות 'פורמט' מקבלת מגוון פורמטים של מחרוזות, והיא תשתמש בהם לפי הסדר עד שמתאים לפורמט של אזור התווית. לכן מומלץ לרשום את הפורמטים לפי הסדר, מהקצר ביותר ועד הקצר ביותר. לתבניות המחרוזות יש אותם דפוסים כמו הפורמט הקודם.


חשוב לשים לב: שבתרשים שלמעלה, כשמשנים את חלון התצוגה, הפורמט של היחידה 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

למידע נוסף על האובייקט Date() ב-JavaScript, רשת המפתחים של Mozilla היא משאב נהדר. תוכלו לקבל מידע נוסף על האובייקטים ב-JavaScript מסוג תאריך.