Reformat Javascript date object

Question

I have a date object that I want to reformat to a different date style, but am having trouble doing so. I've tried .format() and using moment, but can't get it to work (.format() just throws a start.format("YYYY/DDD") is not a function error and moment seems to only return Unix timestamps no matter what I do. I keep getting Invalid Date. Here is a fiddle with my code in it (the dates are displayed when you hover over a block of time).

As requested, here is the actual code:

google.setOnLoadCallback(drawChart);
function drawChart() {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'RowLabel' });
  dataTable.addColumn({ type: 'string', id: 'BlockLabel' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
  ["SAT 2B", "Task 1", new Date(2015, 01, 01), new Date(2015, 02, 02)],
  ["SAT 2B", "Task 2", new Date(2015, 01, 05), new Date(2015, 01, 08)],
  ["SAT 2B", "Task 1", new Date("2015-03-10 05:10:39.010000"), new Date("2015-03-15 05:10:39.010000")],
  ["SAT 2C", "Task 1", new Date("2015-04-10 05:10:39.010000"), new Date("2015-04-15 05:10:39.010000")]
  ]);


  var options = {
    timeline: { colorByRowLabel: true }
  };


  chart.draw(dataTable, options);

  google.visualization.events.addListener(chart, 'onmouseover', function(e) {
    setTooltipContent(dataTable,e.row);
  });
}


function setTooltipContent(dataTable,row) {

  if (row != null) {
    var sat = dataTable.getValue(row,0);
    var taskID = dataTable.getValue(row,1);
    //var start = dataTable.getValue(row,2);
    var start = dataTable.getValue(row,2).toDateString();
    var startFormatted = new Date(start, "dd.mm.yyyy hh:MM:ss")
    //start.format("dddd, MMMM Do YYYY, h:mm:ss a");
    //start.format('yyyy/DDD-HH:mm:ss');
    var end = dataTable.getValue(row,3);

    var content = '<div class="custom-tooltip" ><h1>' + sat + ','+ taskID +'</h1><div>' +'Start:'+startFormatted +', End: '+ end+'</div></div>'; //generate tooltip content
    var tooltip = document.getElementsByClassName("google-visualization-tooltip")[0];
    tooltip.innerHTML = content;
  }
}

To the best of my knowledge what I am trying to reformat is a date object so I'm not sure what is going wrong. I want it to display in the YYYY/DDD HH:mm:ss format (where DDD is day of year).

@JeremyThille I tried using moment like this: `var start = moment(dataTable.getValue(row,2),"YYYY/DDD_HH:mm:ss");` but that didn't work. — kdubs, Jan 07 '16 at 17:49
In this particular instance, it looks like one problem, probably the first you need to fix, is that you're using the Date constructor incorrectly. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date .. if you want to get it into a date object, you'll want to omit the second argument as that's only used when doing Date(year, month[,etc]). This will solve your Invalid Date issue, then you can deal with getting your date into the format you want. — Mic, Jan 07 '16 at 17:54
@Mic I tried changing it to `var startFormatted = new Date(start)` and `startFormatted.format("YYYY/DDD")` and that produced the `.format() is not a function` error — kdubs, Jan 07 '16 at 17:57
https://jsfiddle.net/r35066q4/1/ Check this out - forked from yours. Manually formatted. Probably want to pad leading zeroes in front of the time fields to make sure they're two digits. — Mic, Jan 07 '16 at 18:06
@Mic that looks good except it doesn't seem to be picking up the times (it shows `0:0:0` for all of them but the last two blocks have time) — kdubs, Jan 07 '16 at 18:11

score 0 · Answer 1 · answered Jan 07 '16 at 18:27

0

I figured it out. I needed to use the date like this:

var start = dataTable.getValue(row,2).toDateString();
var startFormatted = moment(start).format("YYYY/DDD HH:mm:ss")

answered Jan 07 '16 at 18:27

kdubs

936
3
22
45

score -1 · Answer 2 · answered Jan 07 '16 at 17:50

-1

have you looked into http://momentjs.com/ or http://blog.stevenlevithan.com/archives/date-time-format Makes dealing with js dates so much easier

answered Jan 07 '16 at 17:50

jDeveloper

2,096
2
21
27

Reformat Javascript date object

2 Answers2