A Few Oddities: Computers track dates by the number of
milliseconds accrued since January 1st 1970 GMT. As I write this the date in milliseconds is
1447126965782. This allows the computer to use math to keep track and tell the date.
Why in the world would the reference point for dates be January 1st 1970 GMT? This time (00:00) is based off of Unix time, where programmers needed a widely agreed upon reference point for establishing dates. This is also known as epoch time. You can read more about this here.
infinity is reached is 447126965782. This is not a problem synonymous with JS, but rather programming as an entirety. This is known as the year 2038 problem, or maybe Y2038K if you prefer, because computers won't be able to encode time after Jan 19, 2038, due to a size limitation in signed 32-bit integers.
moment.js library, used by many developers to make it even easier to obtain, manipulate, and present dates in your applications.
In order to display dates we can create a
Date object to work with. There are four different ways in which we create our date object. Since
Date is a constructor function, we generally use the
new keyword to create a
Date object, which includes all the properties and methods needed to do all "date" things. It's important to understand the difference in that we are not just receiving a date string, but rather a whole object.
Date() without the
new keyword will return just a string representation.
// returns an object new Date(); // Mon Nov 16 2015 17:52:56 GMT-0800 (PST) // returns a string Date(); // 'Mon Nov 16 2015 17:58:13 GMT-0800 (PST)'
We can also create a
Date object three different ways while explicitly assigning it to a representational value:
//1) var myDate = new Date(milliseconds); var myDate = new Date(1447126965782); // Mon Nov 09 2015 19:42:45 GMT-0800 (PST) //2) var myDate = new Date(dateString); /*Note: There are three types of dateStrings used to create our date object. - ISO Dates: "YYYY-MM-DDT00:00:00" "YYYY-MM-DD" "YYYY-MM or YYYY" - Long Dates: "MMM DD YYYY" "DD MMM YYYY" "YYYY MMM DD" - Short Dates: "YYYY/MM/DD" "MM-DD-YYYY" (/ or -)*/ var myDate = new Date("December 25, 2014 12:34:00"); // Thu Dec 25 2014 12:34:00 GMT-0800 (PST) //3) var myDate = new Date(year, month, day, hours, minutes, seconds, milliseconds); //Note: only year, month, day is required var myDate = new Date(2015, 12, 12, 34, 0, 0); // Wed Jan 13 2016 10:00:00 GMT-0800 (PST)
Now that we have created our
Date object, we can use the methods attached to get and set our dates. Please note that when dates are created the time associated is static, meaning it does not update with the progressing time.
Remember you still must create your date object before executing these methods, because you are actually running the methods on a given static date.
getTime() returns the time as number of milliseconds.
var myDate = new Date(); console.log(new Date()); // Sat Aug 22 2015 16:28:48 GMT-0600 (MDT) console.log(myDate.getTime()); // 1440282580112
getFullYear() returns the year.
console.log(new Date().getFullYear()); // 2015
getDay() returns the day of the week as a number (0-6), where Sunday is
0 and Saturday is
console.log(new Date().getDay()); // 6
setDate(day) sets the day relative to the beginning of the currently set month, meaning if we pass 15 as the day, it will set the date to 15 days since the beginning of month, or in other words, the 15th of the month.
// set date to the 15th of the month var myDate = new Date(); myDate.setDate(15); // the 15th of the current month in milliseconds
setFullYear() takes in a number to set as the year.
// syntax yearValue[, monthValue[, dayValue]] // example var myDate = new Date(); myDate.setFullYear(2016, 0, 22); // sets the date to January 22, 2016. //Note: months represented by 0-11
Before I said we needed to use
new Date(), but there are actually three methods that do not require the
Date.parse(dateString) parses a string representation of a date, and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC or NaN if the string is unrecognized or contains illegal date values (e.g. 2015-02-31).
var parsedDate = Date.parse("March 21, 2012"); console.log(parsedDate); // 1332309600000
returns the current date in milliseconds starting in 1970 GMT. This is commonly used for adding timestamps to cookies and local storage.
Date.now(); // 1447126965782
Date.UTC(year, month, day, minutes, seconds, milliseconds) method accepts the same parameters as the longest form of the constructor, and returns the number of milliseconds since January 1, 1970, 00:00:00, universal time.
Date.UTC(96,11); // 849398400000 // Note: only Year and Month is a required field
Sun Aug 23 2015 18:36:58 GMT-0600 (MDT)), moment allows us to present dates that are user friendly.
Note: You will need to include this library in your application locally or load it in via a CDN (content delivery network). We haven't talked about including other code before, but we encourage you to do some research and see what you can put together, until we can devote the time later to fully digging in.
In order to present dates from the moment.js library, you will need to start each statement with
moment() with introduces the moment object, an iteration of the
moment() to initiate an instance of the moment.js date object. We will use the basic method
format() on the
moment() object that will accept date parameters and return dates in user-friendly strings.
moment().format('MMMM Do YYYY, h:mm:ss a'); //August 23rd 2015, 6:43:42 pm moment().format('dddd'); //Sunday moment().format("MMM Do YY"); //Aug 23rd 15 moment().format('YYYY [is still] YYYY'); //2015 is still 2015 moment().format(); //2015-08-23T18:44:38-06:00
Note: Please visit momentjs.com for more elaborate methods, as we just skimmed the surface with our formatting. Don't let your users see ugly date formats.
Please also note that we merely introduced the
Date object and its methods. It is not necessarily important to know everything, but it is extremely helpful to be aware of things and learn how to do research and read documentation. All of us are constantly learning as developers. Be sure to visit Mozilla Developers Network and W3 Schools for further details on how you can construct and use your date object.