0

The date returned from Json looks like this:

2017-09-14T22:11:05.5303556

I would like it returned in a user friendly format, like:

09/14/2017 22:11:05

This is the Json:

[ { id: 98, dateCreated: "2017-09-14T22:11:05.5303556" }, { id: 99, dateCreated: "2017-09-14T22:11:05.5615556" } ]

And this is the JavaScript:

<script> $.ajax({ url:'http://mywebsite/api/Response', dataType: 'json', success: function(json) { myTable = $('#myTable').columns({ data:json, schema: [ {"header":"ID", "key":"id"}, {"header":"Date", "key":"dateCreated"} ], }); } }); </script>

What changes do I have to make to have the date displayed in a user friendly format? Thank you for your help.

Improve this question

3 Answers 3

Reset to default
1

You might want to check out 10 ways to format time and date using javascript.

You can do something like this, for example, for each of the dates:

var example_date = '2017-09-14T22:11:05.5303556'; function formatDate(date) {	var d = new Date(date),	month = d.getMonth(),	date = d.getDate(),	year = d.getFullYear(),	hours = ('0' + d.getHours()).slice(-2),	minutes = ('0' + d.getMinutes()).slice(-2),	seconds = ('0' + d.getSeconds()).slice(-2); month++; return (month + '/' + date +'/' + year + ' ' + hours + ':' + minutes + ':' + seconds); } console.log(formatDate(example_date));

You could also make use of .toLocaleTimeString() and .toLocaleDateString() and combine the two.

If you're not averse to using a 3rd party library, I'd recommend taking a gander at MomentJS. It's very good at allowing you to easily format date/time, e.g...

for (var i in json){ json[i].dateCreated = moment(json[i].dateCreated).format('MM/DD/YYYY hh/mm/ss'); }

...where json is the object returned, would produce:

[{"id":98,"dateCreated":"09/14/2017 10/11/05"},{"id":99,"dateCreated":"09/14/2017 10/11/05"}]
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

What I don't know is how I have to edit my existing script.
Presumably you would need to add the formatting code on the first line of the success function. If you're using moment, copy in that for loop I put. Otherwise, define the first function I asted and use the function like so as the first line of the success function: for (let i in json) { json[i].dateCreated = formatDate(json[i].dateCreated) } Let me know if that helps?
@romsom, awesome :-) Happy to help. Oh, and welcome to Stack Overflow! If you feel this—or any other—answer solved your issue, please consider marking it as accepted by clicking the check mark. This helps keep the focus on older SO which still don't have answers.
1

I think the new Date(date).toLocaleDateString() would get the job done

Example:

 $.ajax({ url: 'http://mywebsite/api/Response', dataType: 'json', success: function(json) { const data = json.map((obj) => ( Object.assign( {}, obj, { dateCreated: new Date(obj.dateCreated).toLocaleDateString() } ) )); myTable = $('#my-table').columns({ data: data, schema: [ { "header": "ID", "key": "id" }, { "header": "Date", "key": "dateCreated" } ], }); } });

I hope that helps ^__^

Improve this answer

4 Comments

What I don't know is where I have to add the new lines in the script.
When I'm adding those lines I'm getting an error in the console and nothing is displayed on the page: ---> VM238:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) at Object.success (00.htm:26) at j (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at x (jquery.min.js:4) at XMLHttpRequest.b (jquery.min.js:4
Again please see my updated response. It has to work now because I tested it. For simple use case like this you don't have to load a large library like momentJS.
I might have missed something but now I get the following error: index2.htm:24 Uncaught TypeError: $(...).columns is not a function at Object.success (index2.htm:24) at fire (jquery-1.12.4.js:3232) at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362) at done (jquery-1.12.4.js:9840) at XMLHttpRequest.callback (jquery-1.12.4.js:10311)
0

Date formatting in JavaScript has been done a million times over.

If you just want a simple format, see this SO answer. If you want something more robust, I would recommend Moment.js.

Moment example: moment().format('MMMM Do YYYY, h:mm:ss a');

Produces: September 15th 2017, 12:57:45 pm

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.