JQuery Datepicker + Grails + dd / mm / yyyy格式 [英] JQuery Datepicker + Grails + dd/mm/yyyy format

问题描述

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

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.

当我使用mm / dd / yy它工作完美，但是当我尝试dd / mm / yy它不工作。

这是taglib（来自Adavis在这个 StackOverflow问题：

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

    }

}

我的GSP我有一个这样的datepicker：

In my GSP I have a datepicker like this:

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

在GSP中，我使用的是TagLib：

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>

发生了什么：
您可以选择日期datepicker，当您保存时，保存的格式为mm / dd / yyyy，当它是dd / mm / yyyy。

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.

所以，想像你正在编辑/创建一个名为fechaDeAprobada的日期字段的图书。

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)

在taglib中，变量 val 给出：
05/07/2014和
05/08/2014

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

我需要什么 p>

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)

推荐答案

问题是您的TagLib依赖于Jav aScript日期构造函数来获取年，月和日（查看Date对象引用在MDN中）：

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

这就是你想要的：

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

这篇关于JQuery Datepicker + Grails + dd / mm / yyyy格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！