2010-04-18 66 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)); 
    } 
}