Reformat the date retrieved from Json

Question

Reformat the date retrieved from Json

When the date is retrieved from the Json data, it is displayed as follows:

2017-09-14T22:11:05.5303556

Is there a way to present it in a more user-friendly format, such as:

09/14/2017 22:11:05

Here is a snippet of the Json data:

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

Furthermore, here is the corresponding JavaScript code:

<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>

Do you have any suggestions on how to modify the code so that the date is shown in a more user-friendly format? Your assistance is greatly appreciated.

javascript json ajax

Answer 1

Answer №1

If you're looking to format time and date using JavaScript, you may find it helpful to explore the article on 10 methods to do so.

One way to achieve this is by following a code snippet like the one below for each date:

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

Another option is to utilize .toLocaleTimeString() and .toLocaleDateString() in combination.

If you're open to using a third-party library, consider checking out MomentJS. It simplifies date/time formatting, as shown in the example below:

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

Using the object returned in the code, you would get:

[{"id":98,"dateCreated":"09/14/2017 10/11/05"},{"id":99,"dateCreated":"09/14/2017 10/11/05"}]

Answer 2

If you're looking to format time and date using JavaScript, you may find it helpful to explore the article on 10 methods to do so.

One way to achieve this is by following a code snippet like the one below for each date:

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

Another option is to utilize .toLocaleTimeString() and .toLocaleDateString() in combination.

If you're open to using a third-party library, consider checking out MomentJS. It simplifies date/time formatting, as shown in the example below:

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

Using the object returned in the code, you would get:

[{"id":98,"dateCreated":"09/14/2017 10/11/05"},{"id":99,"dateCreated":"09/14/2017 10/11/05"}]

Answer 3

Answer №2

Using

new Date(date).toLocaleDateString()

should do the trick

Here's an 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" }
              ],                                                          
           });               
        }               
    });

Hope this information is helpful ^__^

Answer 4

Using

new Date(date).toLocaleDateString()

should do the trick

Here's an 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" }
              ],                                                          
           });               
        }               
    });

Hope this information is helpful ^__^

Answer 5

Answer №3

Formatting dates in JavaScript is a common task that has been tackled countless times.

If you're looking for a straightforward solution, check out this answer on Stack Overflow. For a more comprehensive option, I highly recommend using Moment.js.

Here's an example using Moment.js:

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

This will result in: September 15th 2017, 12:57:45 pm

Answer 6

Formatting dates in JavaScript is a common task that has been tackled countless times.

If you're looking for a straightforward solution, check out this answer on Stack Overflow. For a more comprehensive option, I highly recommend using Moment.js.

Here's an example using Moment.js:

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

This will result in: September 15th 2017, 12:57:45 pm

Reformat the date retrieved from Json

Answer №1

Answer №2

Answer №3

Similar questions

generate a listing based on an HTTP query

console displaying indentation problems with laravel and vue

NodeAutoComplete: Enhanced Autocompletion for Node.js

Invoke a directive's function on a page by utilizing ng-click in AngularJS

Use vanilla JavaScript to send an AJAX request to a Django view

Dealing with excessively large data for json_encode in PHP

What is the best way to turn off jQuery UI (widget) for a particular element?

Can AJAX Delete requests be executed without using jQuery?

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Is there a way to determine the precise location of the scrollbar within a div element?

Tips for creating a JSON value without a property name

Sending a request for the second time may result in data duplication

Having trouble retrieving a specific object from an array using EJS

Best practices for making an AJAX call to fetch information from a database

What is the best way to convert an IHtmlString to JSON using Json.NET?

Steps for modifying an element in an array using Javascript

Checking if the current time falls within a specific range while also taking minutes into account

Utilize res.render in Node.js to pass multiple data arrays to the view

When I attempt to return an object from a function and pass the reference to a prop, TypeScript throws an error. However, the error does not occur if the object is directly placed in

Methods for utilizing StreamReader for reading a JSON file