2010-04-18 64 views
1

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

但是,添加这个自定义PropertyEditor并没有改变任何东西,日期仍然显示为'2010-01-01 00:00:00.0',如果我试图保存日期,它会与Cannot cast object '05.05.2010' with class 'java.lang.String' to class 'java.util.Date'崩溃。

是否有任何额外的魔法需要,如文本框或类似的特殊命名?

+0

做了我的解决方案的帮助? – 2010-05-03 06:31:36

+0

它可行,但在我看来太复杂了。我得到它与上面的解决方案(PropertyEditor)合作,但不要问我我的错误是什么... – Jan 2010-05-05 14:59:40

回答

7

您需要检查GrailsBinder代码。不过,我有一个可能更简单的解决方案。下面是一些查找所有g:datePicker代码并呈现Grails日期选择器的JQuery代码。它隐藏了原始的选择框(所以这个代码将优雅地降级),然后插入一个新的文本框和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(); 
    }); 
}); 

希望这有助于。

+0

这看起来很酷;这是用Grails实现渐进式增强的推荐方式吗? – Armand 2010-04-19 11:04:15

+0

不确定你的意思是“渐进式增强”,但我喜欢它,因为它让Grails保持原样并运行良好。它也降解得很好,所以它应该工作。 – 2010-04-19 22:00:05

+0

渐进式增强〜=优雅退化(http://en.wikipedia.org/wiki/Progressive_enhancement) – Armand 2010-04-20 09:53:12

0

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

  1. 它创建了三个隐藏输入字段dateField_day,dateField_month,dateField_year

  2. 它负责当日期已经从日历中选择填充这些隐藏的输入字段。

  3. 支持多个日期字段没有任何冲突。

它的先决条件如下:

  1. 你必须有安装在您的应用程序结构配置正确的jQuery。这是所有的JS,CSS,和主题

的标记库代码如下:

class JqueryDatePickerTagLib { 

DEF jqDatePicker = {ATTRS,本体 - > DEF出来=出来 DEF命名= ATTRS。命名 DEF ID = attrs.id:命名

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

}}

普惠制代码如下:

<g:jqDatePicker name="orderDate"/> 

你可以找到完整的文章:My Blog

0

不应该有那么多神奇。

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