I have date in a div which looks like "30-Apr-2013" and I want to convert it to: 30 Tuesday APR | 2013
I have write some code to make this conversion for me. Its working fine in Chrome but some how its not working in Firefox and in firebug console it says: Date {Invalid Date} and shows output looks like NaN undefined undefined | NaN. My code looks is below or you can also see this Fiddle:
(function ( $ ) {
$.fn.bcDateModify = function() {
return this.each(function() {
var obj = this;
var srcDate= $(obj).html();
srcDate = srcDate.replace(/\s+/g, '');
objDate = new Date(srcDate);
console.log(objDate);
var newDate = objDate.getDate();
var newDay = objDate.getDay();
var newMonth = objDate.getMonth();
var newYear = objDate.getFullYear();
var weekday=new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monthNames=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
var myhtml ='<div class="date"><span>'+newDate+'</span></div><div class="month-day"><h3>'+weekday[newDay]+'</h3><span>'+monthNames[newMonth]+' | '+newYear+'</span></div>';
$(obj).html(myhtml);
});
};
}( jQuery ));
$(document).ready(function(){
$('.date-obj').bcDateModify();
});
I have date in a div which looks like "30-Apr-2013" and I want to convert it to: 30 Tuesday APR | 2013
I have write some code to make this conversion for me. Its working fine in Chrome but some how its not working in Firefox and in firebug console it says: Date {Invalid Date} and shows output looks like NaN undefined undefined | NaN. My code looks is below or you can also see this Fiddle:
(function ( $ ) {
$.fn.bcDateModify = function() {
return this.each(function() {
var obj = this;
var srcDate= $(obj).html();
srcDate = srcDate.replace(/\s+/g, '');
objDate = new Date(srcDate);
console.log(objDate);
var newDate = objDate.getDate();
var newDay = objDate.getDay();
var newMonth = objDate.getMonth();
var newYear = objDate.getFullYear();
var weekday=new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monthNames=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
var myhtml ='<div class="date"><span>'+newDate+'</span></div><div class="month-day"><h3>'+weekday[newDay]+'</h3><span>'+monthNames[newMonth]+' | '+newYear+'</span></div>';
$(obj).html(myhtml);
});
};
}( jQuery ));
$(document).ready(function(){
$('.date-obj').bcDateModify();
});
- in firebug console it says: Date {Invalid Date}. and shows output looks like NaN undefined undefined | NaN – Imran Commented Jul 26, 2013 at 12:26
-
Add
console.log(srcDate);beforeobjDate = new Date(srcDate);and write what did it log – Kamil T Commented Jul 26, 2013 at 12:27 - @KamilT it shows: 21-Jul-2013, btw you can see this in jsfiddle I have provided. – Imran Commented Jul 26, 2013 at 12:28
-
1
Just get rid of the dashes.
new Date('30 Apr 2013');– Jeff Shaver Commented Jul 26, 2013 at 12:33 -
Date(dateString): String value representing a date. The string should be in a format recognized by the parse method (IETF-pliant RFC 2822 timestamps). -Date.parse(dateString)"A string representing an RFC2822 or ISO 8601 date." – Andreas Commented Jul 26, 2013 at 12:37
3 Answers
Reset to default 10You cannot construct a date the way you are (at least in Firefox you can't), for example passing in the string "22-Jul-2013".
I changed this line
objDate = new Date(srcDate);
to
var dateSplit = srcDate.split("-");
objDate = new Date(dateSplit[1] + " " + dateSplit[0] + ", " + dateSplit[2]);
to ensure the date was constructed correctly.
See the updated fiddle here.
Just found this item regarding the usage of dates with hyphens in FF. Seems like none of the FF versions support that format.
One possible alternate is to replace the - with a prior to constructing the date.
srcDate = srcDate.replace(/-/g, ' ');
This solution works cross browser and has been tested in Firefox v19, Chrome v24 and Safari v5.1.7 (on Windows).
Demo
I know this likely isn't the best answer but I have found these types of things to be really tricky cross browser. This small library has saved me a ton of time.
http://momentjs./
moment("30-Apr-2013", "DD-MMM-YYYY").format("DD dddd MMM | YYYY");
Honestly I feel like JavaScript should have this stuff built in like PHP or other languages.