Dealing with Date Fields Across Different Browsers – Tips and Solutions

browserdate formatinternet explorer

I'm building a web application with multiple forms which all require date fields, and these fields need to be supported across IE, Chrome, and the like.

Our application currently packages the output of the forms as a JSON object which we feed into GsonBuilder to convert them into a java object for persistence.

Our GsonBuilder object currently accepts a format of 'yyyy-MM-dd'. In Chrome, our forms seem to be utilizing HTML5, which include a date picker in the date fields, and the browser seemingly does some magic and GsonBuilder accepts the date with no issues. In IE, however, there is no date picker and the users need to hand-bomb a date, which has to be in the exact specified format for GsonBuilder to accept the field.

So today I've been trying to work out what a good solution to this problem would be, and there are almost so many possibilities that it seems hard to identify the proper one to use.

So far I've considered using the jquery mask plugin to enforce the proper format in IE, however I don't know how this would work in Chrome as the date fields include a date picker which already enforce format.

I've also considered propagating a specific server error back up to the front-end when a user enters an incorrect format in IE. This seems like a bad solution because it would cause guessing games for the user.

Surely, at some point I need to enforce data integrity in IE, but I am not sure what the best way of doing this is. Is there a common pattern that people use to deal with this issue?

Best Answer

You could just use a date picker polyfill like https://github.com/chemerisuk/better-dateinput-polyfill

Related Topic