- HubPages»
- Technology»
- Computers & Software»
- Computer Science & Programming»
- Programming Languages
Using the date in javascript
What can I do with the date?
There are a lot of fun things you can do with the date in Javascript. For example, you could make a background that changes to reflect the season: snowflakes in the winter, and red leaves in the fall. You could also make an image that changes randomly every day. Perhaps even a message that only shows up on certain dates to wish them happy holidays! There are a lot of other things you can do, you just need to use your imagination.
But before we begin,
Here's an example that shows the sort of things we'll be doing.
Getting the date
Before we can talk about actually using the date in javascript, first we need to actually get the date. Thankfully, this is incredibly easy.
var date = new Date(); var weekday = date.getDay(); var month = date.getMonth(); var day = date.getDate(); var year = date.getFullYear();
The first line is the most important here. We're creating a new Date object, which automatically records the current date and time, and storing it into a variable named date.
Creating the weekday, month, day, and year variables isn't necessary, but doing so will bring us great convenience later on.
There are a lot of methods you can use to get different parts of the date, but these four are probably the most common you'll use:
- getDay returns a number representing the weekday, where 0 is Sunday and 6 is Saturday.
- getMonth returns a number representing the current month, where 0 is January and 11 is December.
- getDate returns a number representing the current day of the month, from 1 to 31.
- getFullYear simply returns the current year.
For full documentation on the Date object look here.
Printing the date
The absolutely easiest way to print the date:
document.write(date);
Should write something like this:
Mon Jul 21 2014 19:38:09 GMT-0400 (Eastern Daylight Time)
But this doesn't look too pretty for most applications, so I'll show you how to print the date in any format you please.
To start simple, let's just print the date in number form.
document.write((month+1)+"/"+day+"/"+year);
This should print something along the lines of "7/19/2014".
Note that we added 1 to the month so that it would give the correct number.
The numeric date works, but it's quite minimal. It'd be nice if we could get some words in there, but the date object only gives us numbers.
So let's create an array that contains the names of each month. While we're add it, let's add the weekday as well.
var weekdays=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; var months=["January","February","March","April","May","June","July","August","September","October","November","December"];
Now to print the date using the names for the weekdays and months, we just need to do this:
document.write(weekdays[weekday]+", "+months[month]+" "+day+", "+year);
This should print something along the lines of "Saturday, July 19, 2014".
Note that this time we don't add 1 to the month. This is because arrays start at 0, so January would be "months[0]".
This looks really good, but if you want to be really fancy then there's one more thing we can do to dress up the date even more. We can add an ordinal suffix.
The ordinal suffix is the two letters the come after numbers such as 1st, 2nd, and 3rd.
Oridinal suffixes aren't too complicated, but there's a few special exceptions that make them tricky. For your convenience, I've made a special function for adding the ordinal suffix to numbers. Just for you.
function ordinal(N){
N = N.toString();
if (N.slice(-1) === '1' && N.slice(-2) !== '11'){
return N+"<sup>st</sup>"
}else if (N.slice(-1) === '2' && N.slice(-2) !== '12'){
return N+"<sup>nd</sup>"
}else if (N.slice(-1) === '3' && N.slice(-2) !== '13'){
return N+"<sup>rd</sup>"
}else{
return N+"<sup>th</sup>"
}
}It takes a number as a parameter and converts it to a string. It then checks the last two characters in the string to see whether it ends in 1 but not 11, 2 but not 12, or 3 but not 13. It then returns a string containing the number with the appropriate ordinal suffix. It also wraps the suffix in <sup> tags to make it superscript, but you can remove these if you don't like them.
And to use it:
document.write(weekdays[weekday]+", "+months[month]+" "+ordinal(day)+", "+year);
This should return something similar to "Saturday, July 19th, 2014".
It looks quite nice, I think.
Checking the date
So now we have declared the date object, and we know how to print out the date. But to do more fancy stuff, we'll need to know how to check what date it is. This is really simple:
if (month==11 && day==25){
alert(Merry Christmas!);
}As you can see, here we're checking whether it's Christmas and showing the user a message if it is.
You can also do the same thing for the weekday and the year, and any other date method.
Beware that the month and weekday start at zero, as this means January is month zero and December is month eleven. You can add 1 to the month while checking it if you want. For example, "month+1==12" would check for december.
If you wish, I've made a little function for your convenience that will make it a little easier to check what date or month it is.
Date.prototype.test = function(month, day, year){
//handle the parameters
month = typeof month !== 'undefined' ? month : 0;
day = typeof day !== 'undefined' ? day : 0;
year = typeof year !== 'undefined' ? year : 0;
//check the month, day, and year
if (month>0 && month !== this.getMonth()+1) return false;
if (day>0 && day !== this.getDate()) return false;
if (year>0 && year !== this.getFullYear()) return false;
return true;
}The function takes three parameters, all of which are optional. The three parameters are month, day and year, and it checks to make sure they are the same as the current date. If they are, it returns true. Else it returns false.
To use it to check only the month, you do this: "date.test(1)", where 1 is a number between 1 and 12. In this case we're checking for January.
To check for both day and month, you do this: "date.test(2,29)" Where 29 is a number between 1 and 31, corresponding to the day of month. Here we're checking for February 29th.
To check for only the day or only the year, you can place zeros in the other parameters. My function will ignore parameters that are zero. For example, "date.test(0,0,2015)" Will test for only the year 2015.
Checking a range of dates
My function is good for checking for specific months or dates, but it's not good for checking ranges. Unfortunately checking ranges of dates can sometimes be rather complicated, so for your convenience I've made yet another useful function!
Date.prototype.range = function(month1,day1,year1,month2,day2,year2){
//handle the parameters
month1 = (typeof month1!=='number' || month1===0) ? this.getMonth()+1 : month1;
day1 = (typeof day1!=='number' || day1===0) ? this.getDate() : day1;
year1 = (typeof year1!=='number' || year1===0) ? this.getFullYear() : year1;
month2 = (typeof month2!=='number' || month2===0) ? this.getMonth()+1 : month2;
day2 = (typeof day2!=='number' || day2===0) ? this.getDate() : day2;
year2 = (typeof year2!=='number' || year2===0) ? this.getFullYear() : year2;
//convert the first and second date into a number
var date1 = Date.parse(month1+"/"+day1+"/"+year1);
var date2 = Date.parse(month2+"/"+day2+"/"+year2);
//get the current date and convert it into a number
var cdate = Date.parse((this.getMonth()+1)+"/"+this.getDate()+"/"+this.getFullYear())
//compare the dates
return date1 <= cdate && cdate <= date2;
}This one takes six parameters. The first three are the month, day, and year of the first date, and the second three are the month, day, and year of the second date. Any parameters that are either missing or zero will be set to the current date.
Like with the last function I made for you, the month parameters should be from 1 to 12.
This function converts the two dates into a format which is the number of miliseconds since January 1st, 1970 to make them easier to compare. If the current date is greater than or equal to the first date and less than or equal to the second date, then it returns true. Else it returns false.
Here is an example usage:
if (date.range(6,21,0,9,20,0)){
alert("It's summer!");
}Here we test whether the date is between the 21st of June and the 20th of September, in any year, and send the user a message if it is.
Using the methods above, you have quite a bit of flexibility for making code run only on certain dates, months, and seasons. You can easily target static holidays like Halloween and Christmas, but some holidays which change their date every year, such as Easter, will be a bit more difficult. Unfortunately I can't tell you how to target these dynamic holidays, as each one of them will need to be calculated in a different way.
Using the date
Now that you know how to get and check the date, it's time for the most exciting part.
Our first use will be to change the website's background based on the month or season.
if (date.test(5)){
document.body.style.backgroundImage="url(may.jpeg)"
}Here I used the function date.test I made which I showed you above. If you decide not to use my function, then remember that you can also check the month the traditional way by using "date.getMonth()+1==5".
If the month is May, then the script changes the background image of the body of the webpage to the URL specified. You aren't limited to just changing the background image though, you can change any style of any element you want. For a full list of style attributes you can modify, see here. The styles are the same as CSS styles, but some of them have slightly different names.
Making it random
Next we'll be making an image that changes randomly every day. In essence, an "Image of the day".
But before that we'll need a better random number generator. We'll be using a script called "seedrandom" which will allow us to provide the random number generator with a "seed". When you give it the same seed, it gives you the same random numbers. We'll be using the current date as the seed, which will mean it will give us the same image as long as the date doesn't change.
The actual script can be found through this link, so be sure to include it on your webpage.
The markup
<img src="default.png" alt="Image of the day" id="imageoftheday"> <script src="http://davidbau.com/encode/seedrandom.js">
The script
var images = ["1.png","2.png","3.png","4.png","5.png","6.png"];
Math.seedrandom(month+"/"+day+"/"+year);
var index = Math.floor(Math.random()*images.length);
document.getElementById("imageoftheday").src = images[index];
Math.seedrandom();First we create an array of all the images available for the image of the day.
Then we seed the random number generator with the current date, and generate an index for our array. This index will be the same every time you refresh the page as long as it's still the same day.
Math.random returns a value between 0 and 1. We multiply it by the length of the images array to make the number between 0 and the length of the array, and then use Math.floor to convert it into an integer.
Finally, we actually change the image. We do this by changing its "src" attribute.
After we're all done, we reset the seed to a random value so that if you use random numbers anywhere else on your page they will work as expected.
The rest is up to you!
This is only touching the surface of what you can do with the date in javascript. With a bit of imagination and the right knowledge, almost anything is possible.
As always feel free to use any script I've shown here without any reservation. And if you have any questions, please leave a comment!
