0

how to display the date in this below format using jQuery.

Thursday, January 08, 2013

I saw some plugins but wondering if there is a way without using any plugin.

Please advise if there is a straightforward answer using JavaScript, that's fine too.

VisioN
  • 143,310
  • 32
  • 282
  • 281
geej
  • 341
  • 9
  • 22

4 Answers4

3

The simplest answer is to use:

date.toLocaleDateString()

But, it will use the locale defined by the user's system. The American/English locale fitting your desired output. (I'm not sure about other locales and how they format dates).

So, if you want the date string to always be in that format, this will not be the best answer for you. But, if you want the date to match the user's locale, this answer is the simplest and most correct. :)

http://jsfiddle.net/SyjpS/

var date = new Date(); 
console.log(date.toLocaleDateString());  // Tuesday, January 08, 2013 (on my machine)

EDIT — If you're asking how to change the calendar so that today is Thursday instead of Tuesday, you may need to talk to Caesar about adjusting the calendar realignment. For this, you'll need a time machine. I suggest that you seek out the Doctor, but he may not be willing to change history willy nilly.

Shmiddty
  • 13,847
  • 1
  • 35
  • 52
2

Here's a quick/simple example of what you're asking for:

EDIT - I've update the code for reuse and include the day 0 padding change.

var d = new Date();
console.log(formatDate(d)); 

function formatDate(d){
    var months = ["Januaray", "February", "March"]; //you would need to include the rest
    var days = ["Sunday", "Monday", "Tuesday"];//you would need to include the rest
    return days[d.getDay()] + ", " + months[d.getMonth()] + " " + (d.getDate() < 10 ? "0" + d.getDate() : d.getDate()) + ", " + d.getFullYear();
}

Output for today: Tuesday, Januaray 08, 2013

EXAMPLE

Chase
  • 29,019
  • 1
  • 49
  • 48
  • I believe the OP wants the day number to be two digits. – Shmiddty Jan 08 '13 at 20:05
  • Also, I would suggest encapsulating the answer into a single method call for reuse. – Shmiddty Jan 08 '13 at 20:08
  • @Shmiddty - I must have missed the 0 padding in the OP, my mistake and it should be included now. Also I went ahead and moved the formatting inside a function for reuse. Thank you for pointing those out. – Chase Jan 08 '13 at 20:17
  • `months` and `days` should probably be scoped within that function, as not to pollute the global scope. :) – Shmiddty Jan 08 '13 at 20:20
  • @Shmiddty - I thought about that as well, but then they get recreated each time the function is called. I suppose I could add the wrapping code `(function(){ .... })();` above, but people should be doing that anyway =\ – Chase Jan 08 '13 at 20:23
  • 1
    They are of negligible size, so the recreation will take negligible resources/time. Also, the memory they take will be released upon exit of the function call. – Shmiddty Jan 08 '13 at 20:28
  • I agree that it's negligible, just seems ugly/unnecessary. Thanks again for the comments. – Chase Jan 08 '13 at 20:32
1

Simply use DateJS not to reinvent the wheel.

You may read the API documentation here:

VisioN
  • 143,310
  • 32
  • 282
  • 281
  • 3
    OP is specifically asking for `a way without using any plugin` – MikeM Jan 08 '13 at 19:48
  • 1
    @mdmullinax This is not a plugin, but a *library* (written in pure JavaScript). It is lightweight and easy to use. Why not to try? – VisioN Jan 08 '13 at 19:49
0

The date methods allow you to retrieve all of the different parts of the date and time as numerical values. In the case of the month of the year and the day of the week, the number that is provided is one less than you would normally expect. The reason for this is that the most common use for these values is to use it to look up the name of the month or day from an array and as arrays in JavaScript are numbered from zero, providing the numbers like that reduces the amount of code needed to do the name lookups.

We can go one better than just doing this lookup using the retrieved values though. What we can do is to add extra methods to the Date object to allow us to retrieve the month and day names whenever we want the exact same way that we retrieve any of the other information about the date.

The probable reason why the following methods are not built into the JavaScript language itself is that they are language dependent and need to have different values substituted into the code depending on the language that you want to display the month and day in. For the purpose of showing you how to code this I am going to use the Emglish names for the months and days. If you want to display dates in a different language you will need to substitute the names from that language for their English equivalents.

What we are going to do is to add getMonthName() and getDayName() methods to all our dates so that we can get the month name or day name by calling these new methods directly instead of having to call getMonth() or getDay() and then do an array lookup of the corresponding name. What we are actually doing is building the required array lookups into the new methods so that we can automatically get the correct names for any of our date objects simply by calling the appropriate method.

We don't neeed all that much code to do this. All you need to do to add the getMonthName() and getDayName() methods to all of the date objects that you use is to add the following short piece of code to the very top of the javaScript code attached to the head of your page. Any subsequent processing of date objects will then be able to use these methods.

Date.prototype.getMonthName = function() {
var m = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
return m[this.getMonth()];
} 
Date.prototype.getDayName = function() {
var d = ['Sunday','Monday','Tuesday','Wednesday',
'Thursday','Friday','Saturday'];
return d[this.getDay()];
}

So now with that in place we can display today's date on the page using those new methods in addition to the existing ones. For example we might use the following to get the full date and display it using an alert:

var today = new Date;
alert((today.getDayName() + ', ' + today.getDate() + ' ' + today.getMonthName() + ', ' + today.getFullYear());

Alternatively, we can just retrieve the current month June and day of the week Sunday and use them however we want just the same as for any of the other parts of the date.

function disp() {
var today = new Date;
document.getElementById('mth').innerHTML = today.getMonthName();
document.getElementById('dow').innerHTML = today.getDayName();
}
Ravinder Payal
  • 2,884
  • 31
  • 40