4/17/13

Date/Time functions | JavaScript Tutorial

JavaScript Tutorial
Home Tutorial Timing
Exceptions

Log in

Search this site: Tutorial Understanding timers: setTimeout and setInterval

Search

JavaScript: from the Ground to Closures Document and Events

Date/Time functions
Ilya Kantor Tw eet

Object Oriented Programming Timing

Timing Date/Time functions Understanding timers: setTimeout and setInterval Events and timing in-depth

1. Constructors 2. Getter methods 3. Setter methods 1. Auto-adjusting 2. Numeric conversion, date diff 4. Formatting 1. Parsing from string, D a t e . p a r s e The built-in object for date and time in JavaScript is Date and, partially, date formatting. . It handles all functionality: creation, modification

Frames and windows Regular expressions in JavaScript Advanced and Extra stuff

Constructors
The syntaxes to create a D a t eare: n e wD a t e ( ) Creates a D a t eobject with current date and time:
Run!

Found a mistype? Found a mistype in site content? Select it and press Ctrl-Enter!

1 v a rn o w=n e wD a t e ( ) 2 a l e r t ( n o w )

n e wD a t e ( m i l l i s e c o n d s ) Creates a D a t egiven the number of milliseconds passed from January 1, 1970 00:00:00, GMT+0. Note, millisecond is 1/1000 of second
Run!

1 / /2 4h o u r sa f t e rJ a n1 ,1 9 7 0 2 v a rJ a n 0 2 _ 1 9 7 0=n e wD a t e ( 3 6 0 0 * 2 4 * 1 0 0 0 ) 3 a l e r t (J a n 0 2 _ 1 9 7 0)

n e wD a t e ( d a t e s t r i n g ) If the single argument is a string. See D a t e . p a r s emethod for the format. n e wD a t e ( y e a r ,m o n t h[ ,d a y ,h o u r s ,m i n u t e s ,s e c o n d s ,m s ] ) The date can be created given its components in the current time zone. For this format there should be at least two first arguments, next ones are optional. Note that y e a rshould have 4-digits, and m o n t hstarts with 0: n e wD a t e ( 2 0 1 1 ,0 ,1 ,2 ,3 ,4 ,5 6 7 )/ /1J a n2 0 1 1 ,0 2 : 0 3 : 0 4 . 5 6 7i nl o c a l t i m e z o n e To create a date given its components in UTC time zone, use static method D a t e . U T C ( ) : D a t e . U T C ( 2 0 1 1 ,0 ,1 ,2 ,3 ,4 ,5 6 7 )/ /1J a n2 0 1 1 ,0 2 : 0 3 : 0 4 . 5 6 7i nU T C

Getter methods
All access to date/time components is carried out through methods.

javascript.info/tutorial/datetime-functions

1/5

4/17/13
g e t F u l l Y e a r ( ) Get 4-digit year g e t M o n t h ( )

Date/Time functions | JavaScript Tutorial

Get month, from 0 to 11. g e t D a y ( ) Get the number of day in a week, from 0(Sunday) to 6(Saturday) g e t D a t e ( ) Get day, from 1 to 31 g e t D a y ( ) g e t H o u r s ( ) ,g e t M i n u t e s ( ) ,g e t S e c o n d s ( ) ,g e t M i l l i s e c o n d s ( ) Get the corresponding components. These methods work in local time zone. There are UTC variants of these methods: g e t U T C F u l l Y e a r ( ) ,g e t U T C M o n t h ( ) ,g e t U T C D a y ( )etc. If your time zone is not UTC, the code below should output different hours:
Run!

1 v a rd=n e wD a t e ( ) 2 3 a l e r t (d . g e t H o u r s ( )) 4 a l e r t (d . g e t U T C H o u r s ( )) Also, there is a pair of special getters: g e t T i m e ( ) Returns number of milliseconds passed from 1 Jan 1970, midnight. Exactly the same as used in n e w D a t e ( m i l l i s e c o n d s )constructor. g e t T i m e z o n e O f f s e t ( ) Returns the difference between the local time and UTC time, in minutes. If the daylight saving is in effect, it is taken into account.
Run!

1 a l e r t (n e wD a t e ( ) . g e t T i m e z o n e O f f s e t ( )) / /F o rG M T 1o u t p u t s6 0

Create a function g e t W e e k D a y ( d a t e )which outputs current weekday short form: Sun, Mon, Tue, Sat. v a rd a t e=n e wD a t e ( 2 0 1 1 , 0 , 1 ) ) / /1J a n2 0 1 1 a l e r t (g e t W e e k D a y ( d a t e )) / /' S a t '

Open solution

There are countries which use Monday as day 0, Tuesday as day 1 and so on, Sunday is last day 6. Create a function g e t L o c a l D a y ( d a t e )which returns day number in this representation. v a rd a t e=n e wD a t e ( 2 0 1 1 , 0 , 1 ) ) / /1J a n2 0 1 1 a l e r t (g e t L o c a l D a y ( d a t e )) / /S a t u r d a y ,d a y5

Open solution

Setter methods
The following methods allow to set date components: s e t F u l l Y e a r ( y e a r[ ,m o n t h ,d a t e ] ) s e t M o n t h ( m o n t h[ ,d a t e ] )

javascript.info/tutorial/datetime-functions

2/5

4/17/13
s e t D a t e ( d a t e ) s e t H o u r s ( h o u r[ ,m i n ,s e c ,m s ] ) s e t M i n u t e s ( m i n[ ,s e c ,m s ] ) s e t S e c o n d s ( s e c[ ,m s ] ) s e t M i l l i s e c o n d s ( m s ) s e t T i m e ( m i l l i s e c o n d s )(sets whole date)

Date/Time functions | JavaScript Tutorial

All of them except s e t T i m e ( )are available in UTC variants: s e t U T C H o u r s ( ) .

Auto-adjusting
The important property of the D a t eobject is that it accepts even incorrect components and autoadjusts itself. For example, lets set 62 second:
Run!

1 v a rd=n e wD a t e ( ) 2 d . s e t S e c o n d s ( 6 2 ) 3 4 a l e r t ( d ) / /o u t p u t sc o r r e c td a t e ,i n c r e a s e db y1m i n2s e c . Lets increase the month for Dec, 2011:
Run!

1 v a rd=n e wD a t e ( 2 0 1 1 ,3 1 ) 2 d . s e t M o n t h (d . g e t M o n t h ( )+1) 3 4 a l e r t ( d ) / /J a n ,2 0 1 2

What day of week will be 1000 days after today? Write JavaScript to alert that for you. The result should be a number from 0(Sunday) to 6(Saturday).

Open solution

Numeric conversion, date diff

The D a t eobject when used as a primitive value, gets converted into its millisecond representation:
Run!

1 a l e r t (+ n e wD a t e)/ /s a m ea sn e wD a t e ( ) . v a l u e O f ( ) As a side effect, dates can be substracted, resulting in time difference. Thats used in measuring and profiling:
Run!

1 v a rs t a r t=n e wD a t e 2 3 f o r ( v a ri = 0 ;i < 1 0 0 0 0 0 ;i + + ){ 4 v a rd o S o m e t h i n g=i * i * i 5 } 6 7 v a re n d=n e wD a t e 8 9 a l e r t ( " L o o pt o o k" + ( e n d s t a r t ) + "m s " )

Formatting
Actually, there are several formatting methods in D a t e : t o S t r i n g ( ) ,t o D a t e S t r i n g ( ) ,t o T i m e S t r i n g ( ) The basic string representation. Formatting is not specified, it depends on the browser. Methods t o D a t e S t r i n g ( )and t o T i m e S t r i n g ( )which stringify only date or only time part.
Run!

javascript.info/tutorial/datetime-functions

3/5

4/17/13

Date/Time functions | JavaScript Tutorial

1 v a rd=n e wD a t e ( ) 2 3 a l e r t (d . t o S t r i n g ( ))/ /s o m e t h i n gl i k e' W e dJ a n2 62 0 1 11 6 : 4 0 : 5 0 G M T + 0 3 0 0 ' t o L o c a l e S t r i n g ( ) ,t o L o c a l e D a t e S t r i n g ( ) ,t o L o c a l e T i m e S t r i n g ( ) Same as above, but applies system locale formatting and native language.
Run!

1 v a rd=n e wD a t e ( ) 2 3 a l e r t (d . t o L o c a l e S t r i n g ( ))/ /d a t ei ny o u rl a n g u a g ea n df o r m a t t o U T C S t r i n g ( ) Same as t o S t r i n g ( ) , but returns string for UTC date.

Run!

1 v a rd=n e wD a t e ( ) 2 3 a l e r t (d . t o U T C S t r i n g ( ))/ /s o m e t h i n gl i k e' W e dJ a n2 62 0 1 11 3 : 4 2 : 2 8 G M T '

t o I S O S t r i n g ( ) Returns the date in ISO format, see details in string parsing section below:
Run!

1 v a rd=n e wD a t e ( ) 2 3 a l e r t (d . t o I S O S t r i n g ( ))/ /s o m e t h i n gl i k e' 2 0 1 1 0 1 2 6 T 1 3 : 5 1 : 5 0 . 4 1 7 Z '

Native D a t eformatting methods do not allow to specify custom format. So, function formatting functions are created instead.

Create function f o r m a t D a t e ( d )w h i c ho u t p u t sd a t edi nt h ef o r m a td d . m m . Y Y : v a rd=n e wD a t e ( 2 0 1 1 ,0 ,3 0 ) / /3 0J a n2 0 1 1 a l e r t (f o r m a t D a t e ( d )) / /' 3 0 . 0 1 . 1 1 ' P.S. Make sure that leading zeroes are at place, so 1 Jan 2011 would become 01.01.11, not 1.1.11.

Open solution

Create a function to create a calendar table for given Year/Month. First weekday is Sunday, last day - Saturday. Every day (even empty) is represented by a T D . For example n e wC a l e n d a r ( " c a l " ,2 0 1 1 , 1 )should fill the < d i vi d = ' c a l ' > < / d i v >with calendar given below:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
The starting document is here: tutorial/date/calendar_src.html

javascript.info/tutorial/datetime-functions

4/5

4/17/13

Date/Time functions | JavaScript Tutorial

Open solution

Parsing from string, D a t e . p a r s e

Parsing from and to simplified ISO 8601 Extended format is implemented in most browsers excepts IE<9. The format is: Y Y Y Y M M D D T H H : m m : s s . s s s Z . The Z part denotes an optional time zone. Subforms are also possible: 1 Y Y Y Y 2 3 4 5 6 Y Y Y Y M M Y Y Y Y M M D D T H H : m m / /e x a m p l e :' T 1 2 : 0 0 ' T H H : m m : s s T H H : m m : s s . s s s

There is a method D a t e . p a r s e ( s t r )which parses the s t rinto D a t eobject. If parsing fails, D a t e . p a r s ereturns N a N . The example below works correctly in recent browsers except IE<9 which uses its own non-standard format for D a t e . p a r s e :
Run!

1 v a rd=D a t e . p a r s e ( ' 2 0 1 1 0 1 2 6 T 1 3 : 5 1 : 5 0 . 4 1 7 ' ) 2 / /d=D a t e 3 4 a l e r t ( d ) Prior to ECMAScript 5th edition, there were no D a t estring format, so browsers invented formats of their own. The following older non-ISO format is accepted by all browsers including IE:
Run!

1 v a rd=D a t e . p a r s e ( " J a n u a r y2 6 ,2 0 1 11 3 : 5 1 : 5 0 " ) 2 3 a l e r t ( d ) You can read more about other non-ISO variants supported by IE in MSDN Date.parse documentation

and find the one you want to use. But you have to check the chosen format against all browsers, because its non-standard. Exceptions Understanding timers: setTimeout and setInterval

The content of this site is available under the terms of CC BY-NC-SA. Ilya Kantor, 2011.

"JavaScript is a registered trademark of Oracle corp. This site is not affiliated with Oracle corp.

javascript.info/tutorial/datetime-functions

5/5