|
0
|
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
|
3 |
<head> |
|
|
4 |
<title>Javascript Date Parsing Demo</title> |
|
|
5 |
<script type="text/javascript" src="date-functions.js"></script> |
|
|
6 |
<link rel="stylesheet" type="text/css" href="../files/demo-style.css" /> |
|
|
7 |
</head> |
|
|
8 |
<body> |
|
|
9 |
|
|
|
10 |
<h1>Javascript Date Parsing Demo</h1> |
|
|
11 |
|
|
|
12 |
<p>This page demonstrates the Javascript date-parsing functionality I've |
|
|
13 |
created. First, some samples. The following code:</p> |
|
|
14 |
|
|
|
15 |
<pre> |
|
|
16 |
var d = Date.parseDate("2005-10-05 12:13 am", "Y-m-d g:i a"); |
|
|
17 |
document.write(d + "\n"); |
|
|
18 |
var d = Date.parseDate("9/5/05", "n/j/y"); |
|
|
19 |
document.write(d + "\n"); |
|
|
20 |
</pre> |
|
|
21 |
|
|
|
22 |
<p>generates this output:</p> |
|
|
23 |
|
|
|
24 |
<pre> |
|
|
25 |
<script type="text/javascript"> |
|
|
26 |
var d = Date.parseDate("2005-10-05 12:13 am", "Y-m-d g:i a"); |
|
|
27 |
document.write(d + "\n"); |
|
|
28 |
d = Date.parseDate("9/5/05", "n/j/y"); |
|
|
29 |
document.write(d + "\n"); |
|
|
30 |
d = new Date(); |
|
|
31 |
</script> |
|
|
32 |
</pre> |
|
|
33 |
|
|
|
34 |
<p>This and all output on this page is generated on-the-fly by Javascript, so you can view the page source and see the |
|
|
35 |
code that creates the output you're seeing.</p> |
|
|
36 |
|
|
|
37 |
<p>It is possible to use the date-parsing functionality, together with the |
|
|
38 |
date-formatting functionality, for round-trip formatting and parsing back again |
|
|
39 |
without losing information. All you need to do is use the same format |
|
|
40 |
specifier for both operations. In general, I would suggest using one of the |
|
|
41 |
ISO 8601 patterns, such as <code>Date.patterns.ISO8601LongPattern</code> to |
|
|
42 |
ensure no precision is lost along the way. Obviously you need to use a format |
|
|
43 |
specifier that doesn't discard information during the formatting step; anything |
|
|
44 |
discarded is unrecoverable during the parsing step.</p> |
|
|
45 |
|
|
|
46 |
<p>To demonstrate this functionality, here is a table showing the round-trip |
|
|
47 |
for all the predefined format patterns.</p> |
|
|
48 |
|
|
|
49 |
<script type="text/javascript"> |
|
|
50 |
d = new Date(2005, 10, 18, 20, 11, 32); |
|
|
51 |
document.write("<table class='borders collapsed'>"); |
|
|
52 |
document.write("<tr><th>Input<" + "/th><th>Pattern<" + "/th><th>Formatted Result<" + "/th><th>Parsed Result, Re-Formatted<" + "/th><" + "/tr>"); |
|
|
53 |
for (var f in Date.patterns) { |
|
|
54 |
document.write("<tr><td>" + d.dateFormat(Date.patterns.ISO8601LongPattern) |
|
|
55 |
+ "<" + "/td><td>" + Date.patterns[f] + "<" + "/td><td>" |
|
|
56 |
+ d.dateFormat(Date.patterns[f]) + "<" + "/td><td>" |
|
|
57 |
+ Date.parseDate(d.dateFormat(Date.patterns[f]), Date.patterns[f]).dateFormat(Date.patterns.ISO8601LongPattern) |
|
|
58 |
+ "<" + "/th><" + "/tr>"); |
|
|
59 |
} |
|
|
60 |
document.write("<" + "/table>"); |
|
|
61 |
</script> |
|
|
62 |
|
|
|
63 |
<p>As you can see, some of the formats discard some information, so it's not |
|
|
64 |
always possible to reconstitute the original input. Notice particularly how the date is assumed to be "today" in cases where only the time is preserved |
|
|
65 |
in the formatting string.</p> |
|
|
66 |
|
|
|
67 |
<p>Finally, a word about the internals. As you may have seen me do before, |
|
|
68 |
I've written code that writes code. Here is the regular expression generated |
|
|
69 |
for one of the parsing formats, followed by the automatically generated code |
|
|
70 |
that uses the regular expression to implement the parser:</p> |
|
|
71 |
|
|
|
72 |
<p><code><script type="text/javascript">document.write(Date.parseRegexes[6]);</script></code></p> |
|
|
73 |
|
|
|
74 |
<pre> |
|
|
75 |
<script type="text/javascript"> |
|
|
76 |
document.write(Date.parse6); |
|
|
77 |
</script> |
|
|
78 |
</pre> |
|
|
79 |
|
|
|
80 |
</body> |
|
|
81 |
</html> |