Javascript date parsing and formatting, Part 2
If you have questions or comments or bugs report, or a change to make, be sure to use the project’s new homepage: Flexible JS Formatting Libraries
In this post I’ll explain how I built on my runtime date-formatting functionality into the date-parsing realm. The result is a date-parsing library that literally creates itself at runtime.
The demo
I have a demo of the date-parsing library online for your enjoyment.
How it works
The technique is similar to my date-formatting library:
- accept some input such as
2005-10-11 - accept a format specifier such as
Y-m-d - use the format specifier to create a function capable of interpreting date strings in the given format
This allows parsing dates very efficiently and flexibly. In fact, the function that gets built will parse dates with as much detail as possible, down to the second, defaulting to a less precise date when there’s less information.
The date-parsing code is a bit more complex than the formatting code. The parsing code has to build a regular expression which will successfully match a well-formed input, as specified by the format string. It inserts groups into the regular expression wherever it sees some data it can use to deduce the value of the date, and keeps track of the groups so it can use the captured values as parameters to the Date constructor. For example, if it sees the character Y in the format string, it knows that value can be captured in the regular expression and used as the year parameter to the Date constructor. It matches, but doesn’t use, other data to ensure it is validly formatted. For example, the day of the week isn’t helpful when parsing a date. The demo will make this clear.
Round-trip processing
In many cases, depending on the format string, it should be possible to use the date-parsing code together with the date-formatting code for round-trip processing. Take a date, format it with some format string, then read it back in with the same format string, and you should get the same date. Of course, you need to preserve whatever level of detail you want to get back — you won’t get everything back if you throw it away during the formatting step. You’ll see that in the demo too.
The files
I’m wrapping the date-formatting and date-parsing code up into a single file. I’ve also upgraded the Javascript date-chooser to use both the date-parsing and date-formatting functionality. Please use and enjoy, and if you find any bugs, let me know. Likewise, if you make any improvements, that’s great too — please pass them on to me so I can pass them on to others.
What it’s not
This code is not a JavaScript implementation of strtotime. That’s too difficult and not that useful in my opinion. (For those not familiar with it, strtotime can understand input like “two weeks ago next Sunday”). It’s also not internationalized. It only works for my little slice of the universe: the English language — though international date-formatting standards (ISO 8601, highly recommended) make that a moot point anyway.
Dude, you are a god. Has anybody ever told you that? Because you are. A god. Whoa.
Mark
29 May 06 at 8:45 pm
This is GR-E-E-A-A-T! I’m using it already! One note: adding
toUpperCase()to the input and match strings extends parsing to allcap strings like “THU 08-JUN-2006 16:18″.Rich Johnson
8 Jun 06 at 4:22 pm
Rich, I’ll try to make that change soon (think “soon in the grand scheme of things” :-). Thanks for the idea though! I did not think of that.
Xaprb
8 Jul 06 at 6:31 pm
Thanks for a great set of date extensions! The casing issue could also be done by adding /i to the regex string generated i think (will have to try that now…). Also, there is a document.write (presumably) debug statement in the getWeekOfYear function which needs removing.
Will Holley
14 Aug 06 at 5:35 am
Hi Will, thanks for writing in. Please let me know how the /i works; that was what I would have tried too. Obviously I haven’t given this any attention for a while. There’s just too much else going on. I have no idea where that document.write came from. I don’t even use such things for debugging.
I really need to just spend an hour or two with this and make sure it’s up to speed…
Xaprb
14 Aug 06 at 6:41 am
I was initially looking for a php solution that would accept a date in any format (since I don’t know ahead of time what format it will be in) and return it in a standard format. Looking for that, I stumbled across this page.
Doing a little testing though, I was unable to get your solution to output anything for: “2006-10-11T08:00:52+01:00″.
I tried Date.parseDate(“2006-10-11T08:00:52+01:00″, “Y-m-d\TH:i:sO”); but that didn’t do the trick. I did however notice that in Date.Patterns there were these two listed:
SortableDateTimePattern: "Y-m-d\TH:i:s" UniversalSortableDateTimePattern: "Y-m-d H:i:sO"but not
which seemed like what may be needed.
Bill
13 Oct 06 at 12:15 pm
Just wanted to say: very cool. I’ve been looking for something like this in JavaScript, and the code-generation approach is very clever. FYI, I discovered this from its inclusion in the yui-ext library.
JW
4 Dec 06 at 3:17 pm
This is exactly what I was hoping I would find. Thank you so much. Where can I send money?
steven
16 Apr 07 at 6:37 pm
You can donate via PayPal if you’d like. There’s a link from the homepage of the blog. I’m glad this helped you!
Xaprb
17 Apr 07 at 8:23 pm
Beautiful. Thank you.
Morten
20 Apr 07 at 1:13 pm
found a bug:
Date.prototype.getLastDayOfMonth = function() {
var day = (this.getDay() (Date.daysInMonth[this.getMonth()] – this.getDate())) % 7;
return (day
Elven
28 Feb 08 at 4:55 pm
found a bug in getLastDayOfMonth :
Date.prototype.getLastDayOfMonth = function() {
this.getDaysInMonth();
…
}
otherwise ot gets 28 days for february in leap years :), sorry for the previous post
Elven
28 Feb 08 at 4:57 pm
This project’s new home page is at http://code.google.com/p/flexible-js-formatting/
Xaprb
2 Oct 08 at 10:25 am
for the roundtrip format: “2000-01-01T00:00:00″,
the pattern written in js should be “Y-m-d\\TH:i:s”, it works for me.
excellent component!!!
Keven
18 Oct 10 at 11:27 pm