CODEWITHSUNDEEP
javascriptjsondatetimetimestampsimpledateformat
praneybehl
praneybehl

Reputation: 3981

Convert Json timestamp to normal date and time in javascript

I have a Json timestamp that I would like to convert into simple date time format using javascript.

I need the date and time in the following format : dd-mm-yyyy hr:mn

Here is an example json date from i wish to extract the timestamp: "timestamp": 1326439500

{
   "count": 2,
   "d": [
      {
         "title": "Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust)",
         "description": "Advertise here with BSA Apple cancelled its scheduled sale of iPhone 4S in one of its stores in China’s capital Beijing on January 13. Crowds outside the store in the Sanlitun district were waiting on queues overnight. There were incidents of scuffle between shoppers and the store’s security staff when shoppers, hundreds of them, were told that the sales [...]Source : Design You TrustExplore : iPhone, iPhone 4, Phone",
         "link": "http://wik.io/info/US/309201303",
         "timestamp": 1326439500,
         "image": null,
         "embed": null,
         "language": null,
         "user": null,
         "user_image": null,
         "user_link": null,
         "user_id": null,
         "geo": null,
         "source": "wikio",
         "favicon": "http://wikio.com/favicon.ico",
         "type": "blogs",
         "domain": "wik.io",
         "id": "2388575404943858468"
      },
      {
         "title": "Apple to halt sales of iPhone 4S in China (Fame Dubai Blog)",
         "description": "SHANGHAI – Apple Inc said on Friday it will stop selling its latest iPhone in its retail stores in Beijing and Shanghai to ensure the safety of its customers and employees. Go to SourceSource : Fame Dubai BlogExplore : iPhone, iPhone 4, Phone",
         "link": "http://wik.io/info/US/309198933",
         "timestamp": 1326439320,
         "image": null,
         "embed": null,
         "language": null,
         "user": null,
         "user_image": null,
         "user_link": null,
         "user_id": null,
         "geo": null,
         "source": "wikio",
         "favicon": "http://wikio.com/favicon.ico",
         "type": "blogs",
         "domain": "wik.io",
         "id": "16209851193593872066"
      }
   ]
}

Upvotes: 17

Views: 68679

Answers (3)

James Hill
James Hill

Reputation: 61842

The date is being returned as milliseconds since epoch. The code below creates a JS date object:

var d = new Date(1245398693390);
var formattedDate = d.getDate() + "-" + (d.getMonth() + 1) + "-" + d.getFullYear();
var hours = (d.getHours() < 10) ? "0" + d.getHours() : d.getHours();
var minutes = (d.getMinutes() < 10) ? "0" + d.getMinutes() : d.getMinutes();
var formattedTime = hours + ":" + minutes;

formattedDate = formattedDate + " " + formattedTime;

Here's a working fiddle.

EDIT 1

Much has changed since this answer was posted so long ago (although the original answer is still valid). A slightly cleaner way of doing this after ES6 introduced const/let and template literals would be:

const d = new Date(1245398693390);
let formattedDate = `${d.getDate()}-${d.getMonth()}-${d.getFullYear()}`;
const hours = d.getHours().toString().padStart(2, 0);
const minutes = d.getMinutes().toString().padStart(2, 0);
const formattedTime = `${hours}:${minutes}`;

formattedDate = `${formattedDate} ${formattedTime}`;

Here's a working fiddle.

You could also make the code a bit more terse by making it only slightly less readable:

function getFormattedDate()  {
    const padWithZero = (num, targetLength) => String(num).padStart(targetLength, '0');
    const d = new Date(1245398693390);
    return `${d.getDate()}-${d.getMonth()}-${d.getFullYear()} ${padWithZero(d.getHours(), 2)} ${padWithZero(d.getMinutes(), 2)}`;
}

Here's a working fiddle.

One could also play with .toLocaleString() and pick out the needed elements from there.

Upvotes: 22

canon
canon

Reputation: 41715

Extend Date's prototype to include a format function like so (or find or create your own):

Date.prototype.format = function (formatString) {
    // Returns a formatted date string
    var month = this.getMonth() + 1,
        day = this.getDate(),
        year = this.getFullYear(),
        hours24 = this.getHours(),
        hours = (hours24 === 0 ? 12 : hours24 > 12 ? hours24 - 12 : hours24),
        meridiem = hours24 >= 12 ? "PM" : "AM",
        minutes = this.getMinutes(),
        seconds = this.getSeconds();

    return formatString.replace(/(MM)/g, month.padLeft(2, '0'))
        .replace(/(M)/g, month)
        .replace(/(dd)/g, day.padLeft(2, '0'))
        .replace(/(d)/g, day)
        .replace(/(yyyy)/ig, year)
        .replace(/(yy)/ig, year.toString().substring(2, 4))
        .replace(/(hh)/g, hours.padLeft(2, '0'))
        .replace(/(h)/g, hours)
        .replace(/(HH)/g, hours24.padLeft(2, '0'))
        .replace(/(H)/g, hours24)
        .replace(/(mm)/g, minutes.padLeft(2, '0'))
        .replace(/(m)/g, minutes)
        .replace(/(ss)/g, seconds.padLeft(2, '0'))
        .replace(/(s)/g, seconds)
        .replace(/(tt)/g, meridiem.toLowerCase())
        .replace(/(TT)/g, meridiem);
};

Then, to convert the timestamp into the desired format, dd-mm-yyyy hr:mn (as mentioned in your comment), you'd do the following:

var dateString = new Date(timestamp).format("dd-MM-yyyy hh:mm");

[Edit] Here's the accompanying pad function:

Number.prototype.padLeft = function (width, padChar) {
    // Returns a padded string
    padChar = padChar || ' ';
    var value = this.toString();
    while (value.length < width) {
        value = padChar + value;
    }
    return value;
};

Upvotes: 6

Rajat Singhal
Rajat Singhal

Reputation: 11264

<script>
var timestamp=1326439320;
var date=new Date(timestamp);
var hours = date.getHours(); // minutes part from the timestamp
var minutes = date.getMinutes(); // seconds part from the timestamp
var seconds = date.getSeconds(); // will display time in 10:30:23 format
 var formattedTime = hours + ':' + minutes + ':' + seconds;
alert(formattedTime);
</script>

Upvotes: 2

Related Questions