Using Java’s SimpleDateFormat for jQueryUI datepicker
In my current assignment I am working on a legacy Java JSP application. I wanted to use the nice jQueryUI datepicker for form elements that are dates. Unfortunately the formatDate and parseDate options for jQueryUI datepicker seems to be pretty homegrown as far as I can tell (correct me if I am wrong). We support configurable date formats, so I don’t know at compile/design time what the format is. What to do?
Conversion method
After doing some Googling for answers it seemed not many people had this need. But I did find a stand-alone date formatter that understood Java’s SimpleDateFormat. This was more than I needed since jQueryUI datepicker already provided that code, and I just wanted to shove in the format string as an option. So with much thanks to this post by Laurent Picquet I extended it to meet my needs. The code I wrote is far from from beautiful but it doesn’t appear that JavaScript’s regexp supports if-else clauses.
/* This method is neccessary to close the gap between Java's SimpleDateFormat and jQuery UI datepicker formatDate methods.
Takes the SimpleDateFormat string from the server and turns it into the expected jQueryUI formatDate.
Note: the jQueryUI formatDate only supports some of SimpleDateFormat settings. Basically only Years, months, days, day of week */
function convertToJquiDateFormat(localFormatString){
//Year
if(localFormatString.search(/y{3,}/g) >=0){ /* YYYY */
localFormatString = localFormatString.replace(/y{3,}/g, "yy");
}else if(localFormatString.search(/y{2}/g) >=0){ /* YY */
localFormatString = localFormatString.replace(/y{2}/g, "y");
}
//Month
if(localFormatString.search(/M{4,}/g) >=0){ /* MMMM */
localFormatString = localFormatString.replace(/M{4,}/g, "MM");
}else if(localFormatString.search(/M{3}/g) >=0){ /* MMM */
localFormatString = localFormatString.replace(/M{3}/g, "M");
}else if(localFormatString.search(/M{2}/g) >=0){ /* MM */
localFormatString = localFormatString.replace(/M{2}/g, "mm");
}else if(localFormatString.search(/M{1}/g) >=0){ /* M */
localFormatString = localFormatString.replace(/M{1}/g, "m");
}
//Day
if(localFormatString.search(/D{2,}/g) >=0){ /* DD */
localFormatString = localFormatString.replace(/D{2,}/g, "oo");
}else if(localFormatString.search(/D{1}/g) >=0){ /* D */
localFormatString = localFormatString.replace(/D{1}/g, "o");
}
//Day of month
if(localFormatString.search(/E{4,}/g) >=0){ /* EEEE */
localFormatString = localFormatString.replace(/E{4,}/g, "DD");
}else if(localFormatString.search(/E{2,3}/g) >=0){ /* EEE */
localFormatString = localFormatString.replace(/E{2,3}/g, "D");
}
console.log(localFormatString);
return localFormatString;
}
Where I use it
To use this method I needed to turn my JavaScript file into a jsp so I could dynamically set the SimpleDateFormat string constant at server load time. To this simply change the name of the file extension to JSP and add this line at the top
<%@page contentType="text/javascript; charset=UTF-8" %>
Hope this helps some people.
Thank you Laurent Picquet for 95% of needed code.
Thanks for this!
I just noticed a little mistake here in the pattern for ‘M’ :
20 }else if(localFormatString.search(/M{2}/g) >=0){ /* M */
21 localFormatString = localFormatString.replace(/M{1}/g, “m”);
it should be localFormatString.search(/M{1}/g).
Right you are. Fixed.
Thanks.
Quick and dirty solution in java:
public static String convertToJquiDateFormat(String javaSimpleDateFormat) {
// Year
if (javaSimpleDateFormat.contains(“yyyy”)) {
javaSimpleDateFormat = javaSimpleDateFormat.replaceAll(“yyyy”, “yy”);
} else {
javaSimpleDateFormat = javaSimpleDateFormat.replaceAll(“yy”, “y”);
}
// Month
if (javaSimpleDateFormat.contains(“MMMM”)) {
javaSimpleDateFormat = javaSimpleDateFormat.replace(“MMMM”, “MM”);
} else if (javaSimpleDateFormat.contains(“MMM”)) {
javaSimpleDateFormat = javaSimpleDateFormat.replace(“MMM”, “M”);
} else if (javaSimpleDateFormat.contains(“MM”)) {
javaSimpleDateFormat = javaSimpleDateFormat.replace(“MM”, “mm”);
} else if (javaSimpleDateFormat.contains(“M”)) {
javaSimpleDateFormat = javaSimpleDateFormat.replace(“M”, “m”);
}
// Day
if (javaSimpleDateFormat.contains(“DD”)) {
javaSimpleDateFormat = javaSimpleDateFormat.replace(“DD”, “oo”);
} else if (javaSimpleDateFormat.contains(“D”)) {
javaSimpleDateFormat = javaSimpleDateFormat.replace(“D”, “o”);
}
// Day of month
if (javaSimpleDateFormat.contains(“EEEE”)) {
javaSimpleDateFormat = javaSimpleDateFormat.replace(“EEEE”, “DD”);
} else if (javaSimpleDateFormat.contains(“EEE”)) {
javaSimpleDateFormat = javaSimpleDateFormat.replace(“EEE”, “D”);
}
return javaSimpleDateFormat;
}