Question

我正在使用jQuery UI datepicker而不是<g:datePicker>，它正在更改文本框中的选定日期。现在我想将它整齐地保存回我的数据库，并遇到自定义属性编辑器。 click me hard to see the topic on StackOverflow

但是，添加此自定义PropertyEditor并未更改任何内容，日期仍显示为“2010-01-01 00：00：00.0”，如果我尝试保存日期，则会与Cannot cast object '05.05.2010' with class 'java.lang.String' to class 'java.util.Date'崩溃。< / p>

是否需要额外的魔术，比如文本框的特殊命名或类似名称？

Answer 1

您需要检查GrailsBinder代码。但是我有一个可能更简单的解决方案。下面是一些JQuery代码，它找到所有g：datePicker代码并呈现Grails Date Picker。它隐藏了原始选择框（因此此代码将降级优雅地）然后插入新的文本框和JQuery UI Datepicker。当用户仅更改文本框而不删除日期选择器时，此解决方案也可以使用。

 function updateDatePicker () { 
    $("input[value='date.struct']:hidden").each(function() {
        var dateFormat = "dd/mm/yy";
        var name = $(this).attr('name');            
        var id = name.replace(".", "_").replace("[", "_").replace("]", "_") + "_input"; // Create JQuery Friendly ID

        if ($('#'+id).length == 0) {

            // Find the Select Elements
            var selectDay= $(this).nextAll("select:eq(0)").hide();
            var selectMonth = $(this).nextAll("select:eq(1)").hide();
            var selectYear = $(this).nextAll("select:eq(2)").hide();

            // Get the Values
            var dateDay= $(selectDay).val();
            var dateMonth = $(selectMonth).val();
            var dateYear = $(selectYear).val();

            // Calculate the Current Input Value
            var val = "";           
            if (dateDay != "" && dateYear != "" && dateMonth != "") { // If there is a date in the Selects then use it otherwise it's empty
                var date = new Date (dateYear, dateMonth-1, dateDay);
                val = $.datepicker.formatDate(dateFormat, date);
            }

            // Create element
            var template = "<input type='text' name='"+ id +"' id='"+ id +"' value='"+ val +"'/>";

            if ($(this).parent(".datePickerCalenderView").size()) {
                template = "<div id='"+ id +"'/>";
            }


            $(this).before(template);       
            var displayWidget = $('#' + id );

            displayWidget.blur(function() {         
                var date = $.datepicker.parseDate(dateFormat, $(this).val());

                if (date == null) {
                    $(selectDay).val("");
                    $(selectMonth).val("");
                    $(selectYear).val("");
                }
                else {
                    $(selectDay).val(date.getDate());
                    $(selectMonth).val(date.getMonth()+1);
                    $(selectYear).val(date.getFullYear());
                }
            }).keydown(function(event) {
                // Show popup on Down Arrow
                if (event.keyCode == 40) {
                    displayWidget.datepicker("show");
                }
            });

            displayWidget.datepicker({  
                changeMonth: true,
                changeYear: true,
                dateFormat: dateFormat,
                constrainInput: true,           
                showButtonPanel: true,
                showWeeks: true,
                showOn: 'button',           
                onSelect: function(dateText, inst) { 
                    if (inst == null) {
                        $(selectDay).val("");
                        $(selectMonth).val("");
                        $(selectYear).val("");
                    }
                    else {
                        $(selectDay).val(inst.selectedDay);
                        $(selectMonth).val(inst.selectedMonth+1);
                        $(selectYear).val(inst.selectedYear);
                    }
                }           
            });     
        }
    });   
}

最后添加此代码以在页面加载和进行AJAX调用时更新输入

$(document).ready (function (){ 
    updateDatePicker();

    $("#spinner").ajaxComplete (function(event, request, settings){   
        updateDatePicker();
    });
});

希望这有帮助。

Answer 2

我创建了一个简单的grails自定义标记来使用jQuery UI datepicker。它的特点如下：

它会创建三个隐藏的输入字段dateField_day，dateField_month，dateField_year
当从日历中选择日期时，它负责填充这些隐藏的输入字段。
支持多个日期字段，没有任何冲突。

先决条件如下：

您必须在应用程序结构中正确安装和配置jquery。这就是所有的js，css和主题

taglib代码如下：

class JqueryDatePickerTagLib {

def jqDatePicker = {attrs，body - ＆gt; def out = out def name = attrs.name def id = attrs.id？：name

//Create date text field and supporting hidden text fields need by grails
out.println "<input type=\"text\" name=\"${name}\" id=\"${id}\" />"
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 "\$(\"#${name}\").datepicker({"
out.println "onClose: function(dateText, inst) {"
out.println "\$(\"#${name}_month\").attr(\"value\",new Date(dateText).getMonth() +1);"
out.println "\$(\"#${name}_day\").attr(\"value\",new Date(dateText).getDate());"
out.println "\$(\"#${name}_year\").attr(\"value\",new Date(dateText).getFullYear());"
out.println "}"
out.println "});"
out.println "})</script>"

} }

gsp代码如下：

<g:jqDatePicker name="orderDate"/>

您可以在My Blog

Answer 3

应该没有那么多魔力。

<强> resources.groovy

beans = {
    customPropertyEditorRegistrar(CustomPropertyEditorRegistrar)
}

<强>的src /常规/ {yourpackage} /CustomPropertyEditorRegistrar.groovy

class CustomPropertyEditorRegistrar implements PropertyEditorRegistrar {
    @Override
    void registerCustomEditors(PropertyEditorRegistry registry) {
        // Always set the nullable to true and handle not nullable fields through constraints
        registry.registerCustomEditor(Date.class, new CustomDateEditor(new SimpleDateFormat("dd.MM.yyyy"), true));
    }
}

Grails Date属性编辑器

3 个答案: