|
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> |