Grails日期属性编辑器 [英] Grails Date Property Editor

问题描述

我使用的是jQuery UI日期选择器而不是< g：datePicker> ，它正在改变文本框中的选定日期。现在我想把它整齐地保存到我的数据库中，并且遇到了自定义属性编辑器。 点击我很难看到StackOverflow上的主题

i'm using the jQuery UI datepicker instead of the <g:datePicker>, which is changing the selected date in a textbox. Now I want to save this neatly back into my database, and came across custom property editors. click me hard to see the topic on StackOverflow

然而，添加这个自定义PropertyEditor并没有改变任何东西，日期仍然显示为'2010-01-01 00：00：00.0'，如果我试图保存一个日期，崩溃时使用不能将类'java.lang.String'的对象'05 .05.2010'转换为类'java.util.Date'。

However, adding this custom PropertyEditor didn't change anything, dates are still displayed like '2010-01-01 00:00:00.0' and if I try to save a date it crashes with Cannot cast object '05.05.2010' with class 'java.lang.String' to class 'java.util.Date'.

有没有额外的魔法需要，如文本框的特殊命名或类似的东西？

Is there any additional magic needed, like a special naming of the textbox or something like that?

推荐答案

你需要检查GrailsBinder代码。不过，我有一个可能更简单的解决方案。下面是一些查找所有g：datePicker代码并呈现Grails日期选择器的JQuery代码。它隐藏了原始的Select Boxes（所以这段代码将优雅地降级），然后插入一个新的Textbox和JQuery UI Datepicker。这个解决方案也适用于用户只更改文本框而不删除日期选择器。

You many need to check the GrailsBinder code. However I have a possibly simpler solution. Below is some JQuery Code which finds all the g:datePicker code and renders a Grails Date Picker. It hides the original Select Boxes (so this code will degrade gracefully) then insert a new Textbox and the JQuery UI Datepicker. This solution also works when the user changes just the Text box without dropping down the date picker.

 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时更新输入进行调用

Finally add this code to update the inputs when the page loads and when an AJAX call is made

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

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

希望这有助于您。

这篇关于Grails日期属性编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！