aboutsummaryrefslogtreecommitdiff
path: root/files/id/web/javascript/reference/global_objects/date/index.html
blob: 1fc6272dcffc774a1ad9152e27177c9426fad328 (plain)
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
---
title: Date
slug: Web/JavaScript/Reference/Global_Objects/Date
tags:
  - Date
  - JavaScript
  - NeedsTranslation
  - TopicStub
translation_of: Web/JavaScript/Reference/Global_Objects/Date
---
<div>{{JSRef}}</div>

<p>Creates a JavaScript <strong><code>Date</code></strong> instance that represents a single moment in time. <code>Date</code> objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox"><code>new Date();
new Date(<var>value</var>);
new Date(<var>dateString</var>);
new Date(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minutes</var>[, <var>seconds</var>[, <var>milliseconds</var>]]]]]);
</code></pre>

<div class="note">
<p><strong>Note:</strong> JavaScript <code>Date</code> objects can only be instantiated by calling JavaScript <code>Date</code> as a constructor: calling it as a regular function (i.e. without the {{jsxref("Operators/new", "new")}} operator) will return a string rather than a <code>Date</code> object; unlike other JavaScript object types, JavaScript <code>Date</code> objects have no literal syntax.</p>
</div>

<h3 id="Parameters">Parameters</h3>

<div class="note">
<p><strong>Note:</strong> Where <code>Date</code> is called as a constructor with more than one argument, if values are greater than their logical range (e.g. 13 is provided as the month value or 70 for the minute value), the adjacent value will be adjusted. E.g. <code>new Date(2013, 13, 1)</code> is equivalent to <code>new Date(2014, 1, 1)</code>, both create a date for <code>2014-02-01</code> (note that the month is 0-based). Similarly for other values: <code>new Date(2013, 2, 1, 0, 70)</code> is equivalent to <code>new Date(2013, 2, 1, 1, 10)</code> which both create a date for <code>2013-03-01T01:10:00</code>.</p>
</div>

<div class="note">
<p><strong>Note:</strong> Where <code>Date</code> is called as a constructor with more than one argument, the specifed arguments represent local time. If UTC is desired, use <code>new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})</code> with the same arguments.</p>
</div>

<dl>
 <dt><code>value</code></dt>
 <dd>Integer value representing the number of milliseconds since 1 January 1970 00:00:00 UTC (Unix Epoch).</dd>
 <dt><code>dateString</code></dt>
 <dd>String value representing a date. The string should be in a format recognized by the {{jsxref("Date.parse()")}} method (<a href="http://tools.ietf.org/html/rfc2822#page-14">IETF-compliant RFC 2822 timestamps</a> and also a <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">version of ISO8601</a>).
 <div class="note">
 <p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p>
 </div>
 </dd>
 <dt><code>year</code></dt>
 <dd>Integer value representing the year. Values from 0 to 99 map to the years 1900 to 1999. See the {{anch("Example:_Two_digit_years_map_to_1900_-_1999", "example below")}}.</dd>
 <dt><code>month</code></dt>
 <dd>Integer value representing the month, beginning with 0 for January to 11 for December.</dd>
 <dt><code>day</code></dt>
 <dd>Optional. Integer value representing the day of the month.</dd>
 <dt><code>hour</code></dt>
 <dd>Optional. Integer value representing the hour of the day.</dd>
 <dt><code>minute</code></dt>
 <dd>Optional. Integer value representing the minute segment of a time.</dd>
 <dt><code>second</code></dt>
 <dd>Optional. Integer value representing the second segment of a time.</dd>
 <dt><code>millisecond</code></dt>
 <dd>Optional. Integer value representing the millisecond segment of a time.</dd>
</dl>

<h2 id="Description">Description</h2>

<ul>
 <li>If no arguments are provided, the constructor creates a JavaScript <code>Date</code> object for the current date and time according to system settings.</li>
 <li>If at least two arguments are supplied, missing arguments are either set to 1 (if day is missing) or 0 for all others.</li>
 <li>The JavaScript date is based on a time value that is milliseconds since midnight 01 January, 1970 UTC. A day holds 86,400,000 milliseconds. The JavaScript <code>Date</code> object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.</li>
 <li>The JavaScript <code>Date</code> object provides uniform behavior across platforms. The time value can be passed between systems to represent the same moment in time and if used to create a local date object, will reflect the local equivalent of the time.</li>
 <li>The JavaScript <code>Date</code> object supports a number of UTC (universal) methods, as well as local time methods. UTC, also known as Greenwich Mean Time (GMT), refers to the time as set by the World Time Standard. The local time is the time known to the computer where JavaScript is executed.</li>
 <li>Invoking JavaScript <code>Date</code> as a function (i.e., without the {{jsxref("Operators/new", "new")}} operator) will return a string representing the current date and time.</li>
</ul>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{jsxref("Date.prototype")}}</dt>
 <dd>Allows the addition of properties to a JavaScript <code>Date</code> object.</dd>
 <dt><code>Date.length</code></dt>
 <dd>The value of <code>Date.length</code> is 7. This is the number of arguments handled by the constructor.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<dl>
 <dt>{{jsxref("Date.now()")}}</dt>
 <dd>Returns the numeric value corresponding to the current time - the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC.</dd>
 <dt>{{jsxref("Date.parse()")}}</dt>
 <dd>Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC.
 <div class="note">
 <p><strong>Note:</strong> Parsing of strings with <code>Date.parse</code> is strongly discouraged due to browser differences and inconsistencies.</p>
 </div>
 </dd>
 <dt>{{jsxref("Date.UTC()")}}</dt>
 <dd>Accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since 1 January, 1970, 00:00:00 UTC.</dd>
</dl>

<h2 id="JavaScript_Date_instances">JavaScript <code>Date</code> instances</h2>

<p>All <code>Date</code> instances inherit from {{jsxref("Date.prototype")}}. The prototype object of the <code>Date</code> constructor can be modified to affect all <code>Date</code> instances.</p>

<h3 id="Date.prototype_Methods">Date.prototype Methods</h3>

<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}</div>

<h2 id="Examples">Examples</h2>

<h3 id="Several_ways_to_create_a_Date_object">Several ways to create a <code>Date</code> object</h3>

<p>The following examples show several ways to create JavaScript dates:</p>

<div class="note">
<p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p>
</div>

<pre class="brush: js">var today = new Date();
var birthday = new Date('December 17, 1995 03:24:00');
var birthday = new Date('1995-12-17T03:24:00');
var birthday = new Date(1995, 11, 17);
var birthday = new Date(1995, 11, 17, 3, 24, 0);
</pre>

<h3 id="Two_digit_years_map_to_1900_-_1999">Two digit years map to 1900 - 1999</h3>

<p>In order to create and get dates between the years 0 and 99 the {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}} methods should be used.</p>

<pre class="brush: js">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)

// Deprecated method, 98 maps to 1998 here as well
date.setYear(98);           // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)

date.setFullYear(98);       // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
</pre>

<h3 id="Calculating_elapsed_time">Calculating elapsed time</h3>

<p>The following examples show how to determine the elapsed time between two JavaScript dates in millisconds.</p>

<p>Due to the differing lengths of days (due to daylight saving changeover), months and years, expressing elapsed time in units greater than hours, minutes and seconds requires addressing a number of issues and should be thoroughly researched before being attempted.</p>

<pre class="brush: js">// using Date objects
var start = Date.now();

// the event to time goes here:
doSomethingForALongTime();
var end = Date.now();
var elapsed = end - start; // elapsed time in milliseconds
</pre>

<pre class="brush: js">// using built-in methods
var start = new Date();

// the event to time goes here:
doSomethingForALongTime();
var end = new Date();
var elapsed = end.getTime() - start.getTime(); // elapsed time in milliseconds
</pre>

<pre class="brush: js">// to test a function and get back its return
function printElapsedTime(fTest) {
  var nStartTime = Date.now(),
      vReturn = fTest(),
      nEndTime = Date.now();

  console.log('Elapsed time: ' + String(nEndTime - nStartTime) + ' milliseconds');
  return vReturn;
}

yourFunctionReturn = printElapsedTime(yourFunction);
</pre>

<div class="note">
<p><strong>Note:</strong> In browsers that support the {{domxref("window.performance", "Web Performance API", "", 1)}}'s high-resolution time feature, {{domxref("Performance.now()")}} can provide more reliable and precise measurements of elapsed time than {{jsxref("Date.now()")}}.</p>
</div>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initial definition. Implemented in JavaScript 1.1.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}} [1]</td>
   <td>{{CompatVersionUnknown}} [1]</td>
   <td>{{CompatVersionUnknown}} [2]</td>
   <td>{{CompatVersionUnknown}} [1]</td>
   <td>{{CompatVersionUnknown}} [1]</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Some browsers can have issues when parsing dates: <a href="http://dygraphs.com/date-formats.html">3/14/2012 blog from danvk Comparing FF/IE/Chrome on Parsing Date Strings</a></p>

<p>[2] <a href="https://msdn.microsoft.com/en-us//library/ie/ff743760(v=vs.94).aspx">ISO8601 Date Format is not supported</a> in Internet Explorer 8, and other version can have <a href="http://dygraphs.com/date-formats.html">issues when parsing dates</a></p>