JQuery Datepicker + Grails + dd/mm/yyyy format

Question

So I have the jquery datepicker allowing the user to choose the dates, a taglib to handle the value (date); and the field that uses the taglib and the jquery datepicker in the gsp.

When I work with mm/dd/yy it works perfect, but when I try dd/mm/yy it doesn't work.

Here is the taglib (Taken from Adavis in this StackOverflow question:

class JqueryDatePickerTagLib {

    def jqDatePicker = {attrs, body ->
        def out = out
        def name = attrs.name    //The name attribute is required for the tag to work seamlessly with grails
        def id = attrs.id ?: name
        def minDate = attrs.minDate
        def showDay = attrs.showDay
        def val = attrs.value ?: ''

        println "Jquery val: "+val

        //Create date text field and supporting hidden text fields need by grails
        out.println "<input type=\"text\" name=\"${name}\" id=\"${id}\" value=\"${val}\" class=\"datepicker input-small\"/>"
        out.println "<input type=\"hidden\" name=\"${name}_day\" id=\"${id}_day\" />"
        out.println "<input type=\"hidden\" name=\"${name}_month\" id=\"${id}_month\" />"
        out.println "<input type=\"hidden\" name=\"${name}_year\" id=\"${id}_year\" />"

        //Code to parse selected date into hidden fields required by grails
        out.println "<script type=\"text/javascript\"> \$(document).ready(function(){"
        out.println "\$(\"input[name='${name}']\").datepicker({"
        out.println "onClose: function(dateText, inst) {"
        out.println "\$(\"input[name='${name}']\").attr(\"value\",dateText);"
        out.println "\$(\"input[name='${name}_month']\").attr(\"value\",new Date(dateText).getMonth() +1);"
        out.println "\$(\"input[name='${name}_day']\").attr(\"value\",new Date(dateText).getDate());"
        out.println "\$(\"input[name='${name}_year']\").attr(\"value\",new Date(dateText).getFullYear());"
        out.println "}"

        //If you want to customize using the jQuery UI events add an if block an attribute as follows
        if(minDate != null){
            out.println ","
            out.println "minDate: ${minDate}"
        }

        if(showDay != null){
            out.println ","
            out.println "beforeShowDay: function(date){"
            out.println "var day = date.getDay();"
            out.println "return [day == ${showDay},\"\"];"
            out.println "}"
        }

        out.println "});"

        if (val != '') {
            out.println("\n")
            out.println "\$(\"input[name='${name}_month']\").attr(\"value\",new Date('${val}').getMonth() +1);"
            out.println "\$(\"input[name='${name}_day']\").attr(\"value\",new Date('${val}').getDate());"
            out.println "\$(\"input[name='${name}_year']\").attr(\"value\",new Date('${val}').getFullYear());"
        }

        out.println "})</script>"

    }

}

In my GSP I have a datepicker like this:

  $.datepicker.regional['es'] = {dateFormat: 'dd/mm/yy'});

And in the GSP I am using the TagLib like this:

<g:jqDatePicker id="fechaDeAprobada" name="fechaDeAprobada"
        class="datepicker" 
        value="${formatDate(format:'dd/MM/yyyy', date: bookInstance?.fechaDeAprobada)}" />
</div>

What is happening: You choose the date in the datepicker and when you save, it is saved like the format was mm/dd/yyyy when it really was dd/mm/yyyy.

So, imagine you are editing/creating a Book with a date field called "fechaDeAprobada".

You choose:
07/05/2014 (today 7-May)
08/05/2014 (tomorrow 8-May)
And they appear in the database like this:
2014/07/05 (05-July)
2014/08/05 (05-August)

In the taglib the variable val gives: 05/07/2014 and 05/08/2014

What I need

You choose:
07/05/2014 (today 7-May)
08/05/2014 (tomorrow 8-May)
Saved in the db like:
2014/05/07 (today)
2014/05/08 (tomorrow)

Answer 1

The problem is that your TagLib is relying on the JavaScript date constructor to get the year, month and day (check out the Date object reference in the MDN.):

new Date(dateText)

So, this is what you have:

out.println "onClose: function(dateText, inst) {"
out.println "\$(\"input[name='${name}']\").attr(\"value\",dateText);"
out.println "\$(\"input[name='${name}_month']\").attr(\"value\",new Date(dateText).getMonth() +1);"
out.println "\$(\"input[name='${name}_day']\").attr(\"value\",new Date(dateText).getDate());"
out.println "\$(\"input[name='${name}_year']\").attr(\"value\",new Date(dateText).getFullYear());"
out.println "}"

And this is what you want:

out << """
onClose : function(dateText) {
  var dateParts = dateText.split('/');
  //this constructor use year, month, day.
  var date = new Date(dateParts[2], dateParts[1], dateParts[0]);
  $("input[name='${name}_month']").val(date.getMonth() + 1);
  $("input[name='${name}_day']").val(date.getDate());
  $("input[name='${name}_month']").val(date.getFullYear());
}
"""