JQuery Datepicker + Grails + dd/mm/yyyy 格式

Question

所以我有一个 jquery datepicker 允许用户选择日期，一个 taglib 来处理值（日期）；以及在 gsp 中使用 taglib 和 jquery datepicker 的字段。

当我使用 mm/dd/yy 时它运行良好，但当我尝试 dd/mm/yy 时它不起作用。

这是标签库（取自 Adavis 在这个 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>"

    }

}

在我的 GSP 中，我有一个这样的日期选择器：

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

在 GSP 中，我使用的是这样的 TagLib：

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

发生了什么： 您在日期选择器中选择日期，当您保存时，它会像格式为 mm/dd/yyyy 一样保存，而实际上它是 dd/mm/yyyy。

因此，假设您正在编辑/创建一本书，其中包含一个名为“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)

在 taglib 中，变量 val 给出： 2014 年 5 月 7 日和 2014 年 5 月 8 日

我需要什么

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

问题在于您的 TagLib 依赖于 JavaScript 日期构造函数来获取年、月和日（请查看 Date 对象引用 in the MDN。）：

new Date(dateText)

所以，这就是你所拥有的：

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 "}"

这就是你想要的：

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());
}
"""