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

时间:2014-05-07 18:50:17

标签: jquery grails datepicker

所以我有jquery datepicker允许用户选择日期,taglib来处理值(日期);以及在gsp中使用taglib和jquery datepicker的字段。

当我使用mm / dd / yy时,它工作得很完美,但是当我尝试dd / mm / yy时它不起作用。

这是taglib(摘自此StackOverflow question中的Adavis:

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时。

因此,假设您正在编辑/创建一个名为&#34; fechaDeAprobada&#34;的日期字段的图书。

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和     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)

1 个答案:

答案 0 :(得分:2)

问题是您的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());
}
"""