It’s quite surprising for a .NET developer to see that JavaScript doesn’t provide any mechanism to format dates. Considering how powerful JavaScript is, especially in environments where custom development is limited or not allowed, you can provide some great experience using JavaScript only. But just because something isn’t there out of the box, it doesn’t mean we can’t make it ourselves.
While working on a new project I’ve found that it would be actually great to be able to format dates using JavaScript just as you can do it in .NET. Just call a method with two parameters: date format and a locale and let JavaScript do the rest. Wouldn’t that be cool?
Formatting dates using Date.format function
Looking at the date formatting capabilities of .NET I have created a date formatting function for JavaScript. I haven’t copied everything though. I have provided a basic formatting mechanism with a couple of predefined formatting patterns:
Because formatting date depends on the culture, I have added support for locale as well. Together with the library you get date formatting for US English (1033) and Netherlands Dutch (1043). If you want to extend it with your own culture simply copy an existing template, translate the names of week days and months and enter the info about the clock format: 12 or 24 hours:
To simplify the formatting process I have attached the format function to the standard JavaScript Date() object. You can now format a date using a simple call:
The cool stuff is that while typing the above statement in Visual Studio 2008 you will even get Intellisense!
While formatting dates you can use either one of the predefined patterns or provide your own. Personally I think that you should stick with the predefined ones as they automatically adjust to the provided culture. Imagine using D as the formatting pattern. While formatting according to the en-US culture you would get dddd, MMMM dd, yyyy. Only by changing the culture to nl-NL the formatted date would automatically change to dddd d MMMM yyyy. See the difference?! It’s how date formatting in .NET works and how the date format function I have provided works as well.
Check out the working example. While I have used jQuery in the presented example to help me grab the dates from the document, it is not required in order to use JavaScript date formatting.
Download: JavaScript date formatting .NET style (3KB)
August 15th, 2009 at 6:54 pm
Hi,
I am totally new to JS – bad – but eager to learn – good?
How should I use this code to format dates on a SP page?
Greg
August 15th, 2009 at 11:00 pm
@Greg: could you provide me with some more details about what you want to achieve? Is there anything in the article above that you don't understand?
August 16th, 2009 at 11:41 pm
My only experience with Javascript and JQuery is to add code to a hidden CEWP on a Sharepoint page. So, that is fairly limited.
I would need to format dates differently depending of the webpart they belong to.
Greg
August 17th, 2009 at 12:15 am
@Greg: great to hear because you will need all your skills to get the job done. First of all you would need a mechanism to distinct on which Web Part you're working. You could do it for example by retrieving the title (I don't know the exact selectors but these shouldn't be that difficuly to figure out using either the IE developer tools/toolbar or Firebug). Then you would perform the rendering depending on the Web Part type. Of course retrieving the dates from the contents of your Web Parts is specific to your case. Basically it's all about finding the right selectors to get the content out of the page.
Let me know should you have any more questions.
Good Luck!
January 5th, 2011 at 5:04 pm
I am really not your enemy, it is only that I think developers should be a bit more rigorous and scientific in their texts ;o)
Here what are you doing is comparing apples and pears. JavaScript is a language and .NET is an runtime environment. Which is on top of that also: language agnostic.
Comparing JavaScript to C# might have much more sense.
But it seems to me, the most sensible approach would be not to mention .NET or C# at all and just present the solution.
There is a simple but very useful general format() which is also ".net like" if that is a mark of the quality:
//
// .net string.format like function
// usage: "{0} means 'zero'".format("nula")
// returns: "nula means 'zero'"
// place holders must be in a range 0-99.
// if no argument given for the placeholder,
// no replacement will be done, so
// "oops {99}".format("!")
// returns the input
// same placeholders will be all replaced
// with the same argument :
// "oops {0}{0}".format("!","?")
// returns "oops !!"
//
if ('function' != typeof String.format)
String.prototype.format = function() {
var args = arguments;
return this.replace(/\{(\d|\d\d)\}/g, function($0) {
var idx = 1 * $0.match(/\d+/)[0]; return args[idx] !== undefined ? args[idx] : (args[idx] === "" ? "" : $0);
}
);
}
Thanks …
January 6th, 2011 at 7:08 am
@DBJ: the reason I used .NET instead of C# is because the same formatting pattern applies to other languages on the .NET platforms as well. I guess it's a semantical difference rather than the end of the world ;-) Thanks for the feedback.
January 20th, 2011 at 8:02 pm
Thanks for this example!
I had to make a minor change to it though. Sunday is the first day of the week in the US, so I had to update the days array in the code:
daysLong: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
Thanks!