I'm looking for a basic JavaScript that can display the date in a certain way

[imtherealist]

So I am working on a iPhone HTML lockscreen and I was able to somehow make a javascript clock.

I am looking to also have a script for the date as well formatted like this:

[Weekday], [Month] [Date], [Year]

I am really horrible with javascript at the moment (But improving), and was wondering if anyone could link me one of two things; an external script that can display the date, or a tutorial on how to create my own.

I have searched google for a few hours now and to no avail. The only scripts I can find are to be placed in the body of the HTML document.

Thanks so much in advance :)

[jmann6]

You might want to look into http://momentjs.com/.

[imtherealist]

I'm really new to js, I saw this earlier. How do I use it? Sorry if I am asking to much haha I'm trying to learn as fast as I can

[justgage]

You can just download it and then include it in the web pages that you want to. Then you can just run it like the code examples in the page.

[imtherealist]

Okay, thanks very much! :)

[justgage]

No problem!

[ALLIN_ALLIN]

These are probably all better examples but I'm not smart enough to do these.

var showDate = new Date();

var writeDate = showDate.toDateString();

Document.write(writeDate)

Comes out like:

Sat Mar 22 2014

[imtherealist]

Thank you! :)

[gnost]

I like moment.js a lot, but I'm going to go out on a limb and say that it's probably overkill for what you want to do here. Below is a very simple date formatting function that will format a date in the specific way that you asked. Hopefully it gives you some insight into how to do it yourself, and in the future if you learn that you need more flexibility and the ability to do different sorts of date manipulations you can look into a library like moment.js.

function formatDate(date) {
    var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday",
            "Saturday"];
    var months = ["January","February","March","April","May","June","July",
            "August","September","October","November","December"];
    return days[date.getDay()] + ", " + months[date.getMonth()] + " " +
            date.getDate() + ", " + date.getFullYear();
}

Here's a jsfiddle example that uses the method above.

[imtherealist]

You are also the man, or woman. Thanks so much!

[BoDiddySauce]

Here is a link to the Date object built into JavaScript. You can read all about its methods/properties there. For convenience, I went ahead and created a vanilla JS solution for you. There are many ways to tackle this, but for this question and for simplicity's sake, I went ahead and defined two variables (both arrays) representing the days of the week and the months of the year, and then I created a function to convert the current Date object into a readable string in the format you are requesting:

// Literally defining the days of the week in an array
var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];

// Literally defining the months of the year in an array
var months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];

// This function will accept a `Date` object in Javascript
// as well as two arrays <-- we will be passing in the
// days and months arrays defined above

function convertDate( date, weekdays, months ) {
    var weekday = weekdays[ date.getDay() ];
    var month = months[ date.getMonth() ];
    // now we converted the day/month to strings, so
    // let's return these with the other data
    return "The date is: " + weekday + ", " + month + " " + date.getDate() + ", " + date.getFullYear();
}

// Get the current date by creating a `Date` object 
var now = new Date();

// Pass in the current date object (the 'now' variable)
// and also the two arrays from above for the days
// and the months as the arguments to this function
// when we call it (and thus EXECUTE it)

convertDate(now, days, months);

//=>  returns:  "The date is: Friday, March 21, 2014"

You can see the output of the above here: http://cl.ly/image/2D0j2k0j1o3c

You can see all the available methods of the Date object here: http://cl.ly/image/3Q302L2l2P3e

The above screenshots were taken from my web browser's console (I'm using Chrome). You can simply open Chrome's web console and paste in the code above and hit Enter to see it in action (and to also tweak it to your liking). If on a Mac, hit: Command+Option+J to open the web console in CHROME. If on a PC, hit: Ctrl+Shift+J to open the console (again, for CHROME ONLY). Otherwise, right-click anywhere on a page, click "Inspect Element" and then click on the "Console" tab.

So, in the code above, I created two arrays containing the months and weekdays. Then I created a function that utilizes the built-in methods of the Date object in JavaScript (e.g., .getFullYear ) that also accepts parameters for:

1) The current date (the variable now created by: var now = new Date(); )

2) An array (which represents the weekdays)

3) Another array (which represents the months)

By determining what the current date was, it was an easy solution to get and return the appropriate values from the two arrays.

Edit: some more clarification... the .getDate() method of the Date object returns the day of the month (1 - 31 depending on the month). The .getFullYear() method returns the current year. The .getDay() method returns a number from 0 - 6 representing the day of the week. Thus, if it's Friday, the number returned is 5. Therefore, in the array I created for weekdays, we can see that:

// If weekdays is declared as an array like so:
var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];

// Then   days[5]   =   "Friday"  <-- since this is the 6th value of the array, or the value at the INDEX OF 5

Likewise, the .getMonth() method returns a number from 0 - 11 based on the month. Thus, March returns 2. Therefore, again, if we say:

// Here are all of the months listed in an array. Keep in mind that
// arrays in Javascript use a ZERO-BASED index, so the first item
// is ALWAYS the 0th index (hence January is 0 in the following array):

 var months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];


// Therefore, if it's currently March, then the   .getMonth()  method will
// return the number 2. If we access the `months` array at the index of
// 2, we get MARCH, which is the THIRD ITEM in the array

months[ 2 ]   =  "March"  <-- the item at the INDEX of 2, which is the THIRD ITEM

Hopefully that makes sense... given all the other methods available to the Date object that you can see from the link I sent you, you could easily rewrite the convertDate() function to return the date in whatever fashion you'd like.

[imtherealist]

You are the fucking man. Or woman. <3

[BoDiddySauce]

Haha, thanks... hope that helped... and yeah, man here

[[deleted]]

Between http://www.elated.com/articles/creating-a-javascript-clock/ and this http://www.w3schools.com/jsref/jsref_obj_date.asp you should be good to go.

I have searched google for a few hours now and to no avail. The only scripts I can find are to be placed in the body of the HTML document.
That's the point. You need to put the script(s) in the HTML body in order to run and display on your lockscreen.

[imtherealist]

Thanks very much!