Posts
202
Comments
1112
Trackbacks
51
KnockoutJS Value Converter to Deal with JSON Dates

A few weeks ago, Scott Hanselman blogged about the challenges with working with JSON dates and the ASP.NET Web API. In the post he described how the current version of the Web API sends back dates in Epoch time. The conclusion of his post was that JSON.NET, which the Web API will use OOTB, will use ISO 8601 for JSON dates moving forward.

This is all an ideal solution if you’re using the latest version of the ASP.NET Web API that uses JSON.NET. However, what if you’re in a situation where you are a client developer and you are not in control of the server? That is, you have to deal with an Epoch date in your JavaScript code. In this case, you might be working on a device such as an iPad that wants dates in a certain format (e.g., yyyy-mm-dd) and this certainly is not compatible with Epoch. Hanselman did show a KnockoutJS binding handler in his post but you want this to seamless be a 2-way operation. That is, when you get the epoch date from the server, you want it displayed in your format – then when you’re done editing it, you want it sent back to the server in epoch format.

A quick and easy way to do this with KnockoutJS is to use a “value converter” – this is just a specific type of computed observable that includes both a read and write function. In the jsFiddle below, the “read” function takes an epoch date and converts it to the yyyy-mm-dd format. I can edit the formatted date however I want and the “write” function will automatically be invoked to convert my formatted date back to epoch time. This completes to 2-way data binding:

 

Direct link to the jsFiddle.

This code does not take into account daylight savings time (there is also some manual string parsing for the dates) – however, there are other JS libraries you can incorporate into the code above that does take daylight savings time elegantly into account. As you can see, KnockoutJS provides some convenient features to transform between two different formats without having to litter your code with conditional logic all over the place.

posted on Sunday, April 22, 2012 10:04 PM Print
Comments
No comments posted yet.

Post Comment

Title *
Name *
Email
Comment *  
 

View Steve Michelotti's profile on LinkedIn

profile for Steve Michelotti at Stack Overflow, Q&A for professional and enthusiast programmers




Google My Blog

Tag Cloud