CODEWITHSUNDEEP
jqueryjsondate
qts
qts

Reputation: 1044

Change JSON date format in Jquery

I am assigning values from a json array to a form using the below jquery code: 

$.getJSON('/mysite',function(result){
    $('.forminput').each(function(){
        $(this).val(result[this.id]);
    });
};

The array would looks like this and has a date format for 'birthday': 

{name: 'John',
 address: 'here',
 birthday: ISODate("1974-10-27T16:00:00Z")}

I'd like to convert the date to mm/dd/yyyy format (otherwise it displays this: '2010-10-27T16:00:00.000Z'). My question is, what code can I insert to the client-side to convert the date value before assigning it, such as:

$.getJSON('/mysite',function(result){
    $('.forminput').each(function(){
        if(typeof result[this.id]== 'DATE'){
            result[this.id].format('mm/dd/yyyy'); 
            $(this).val(result[this.id]);
         }
        else{
        $(this).val(result[this.id]);             
        }
     }
});

Any help is appreciated!

Upvotes: 1

Views: 5540

Answers (3)

qts
qts

Reputation: 1044

This is what I ended up doing:

$.getJSON('/mysite',function(result){
    $('.forminput').each(function(){
        if (this.id==='birthday'){
            console.log('result[this.id]: '+result[this.id]);
            var bday=convertdate(result[this.id]);
            console.log(bday);
            $(this).val(bday);
        }
        else{
            $(this).val(result[this.id]);// assigns each key value to each element id.
        }

and the convertdate function:

function convertdate(dtvalue){
        console.log('converting date')
        var datestring = new Date(dtvalue);
        var d=new Date(datestring);
        return result = (d.getMonth() +1) + '/' + d.getDate() + '/' + d.getFullYear();
}

Upvotes: 0

Carsten Massmann
Carsten Massmann

Reputation: 28236

Somewhere in his original version of the JSON class the master himself, Douglas Crockford, provided a way of "reviving" date objects in JSON objects, see here:

// in: json_parse(text, reviver)
function reviver (key, value) {
 var a;
  if (typeof value === 'string') {
  a =
   /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
  if (a) {
   return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6]));
   }
  }
  return value;
}

The function reviver can be inserted as a second argument of the JSON.parse() function and will only step into action if an ISO date string is identified.

To insert the date object with your specified formatting into your form you could use something like this:

Date.prototype.fmtUS=function(){
 var dd=function(i){return (i<10?'0':'')+i;};
 return dd(this.getMonth()+1)+'/'+dd(this.getDate())+'/'+this.getFullYear();};

new Date().fmtUS() // "08/29/2015"

If you want to go a step further you could also make your fmtUS() the standard date format by doing 

with(Date.prototype)toString=fmtUS;
new Date(); // "08/29/2015"

Upvotes: 1

bhspencer
bhspencer

Reputation: 13590

Create a new Date object on your iso date string with:

var dateString = "2010-10-27T16:00:00.000Z";
var d = new Date(dateString);

You can then access the various methods of the date object and construct what ever string you need. e.g.

var result = (d.getMonth() +1) + '/' + d.getDate() + '/' + d.getFullYear();

That produces the result "10/27/2010".

You would need loop through your response and apply the above code to each of your iso date values.

Upvotes: 3

Related Questions