jquery ui datepicker而不是grails中的selectfield schaffling

Question

在grails scafolding中，通常有3或4個輸入日期的選擇域。我們可以改變'renderEditor.template'，以便我們可以使用jquery ui datepicker來代替。

Answer 1

成功集成jQuery UI的日期選擇器內的Grails模板

在renderEditor.template替換 'renderDateEditor' 用下面的代碼：

private renderDateEditor(domainClass, property) { 
    def precision = (property.type == Date || property.type == java.sql.Date || property.type == Calendar) ? "day" : "minute"; 
    if (!cp) { 
     return "<g:datePicker name=\"${property.name}\" precision=\"${precision}\" value=\"\${${domainInstance}?.${property.name}}\" />" 
    } else { 
     if (!cp.editable) { 
      return "\${${domainInstance}?.${property.name}?.toString()}" 
     } else { 
      def out = new StringBuffer("") 

      out << "<input type=\"text\" name=\"${property.name}_datepicker\" id=\"${property.name}_datepicker\" value=\"<g:formatDate date=\"\${${domainInstance}?.${property.name}}\" formatName=\"dateonly.date.format\" />\"/>" 
      out << "<input type=\"hidden\" name=\"${property.name}_day\" id=\"${property.name}_day\" value=\"<g:formatDate date=\"\${${domainInstance}?.${property.name}}\" format=\"dd\" />\"/>" 
      out << "<input type=\"hidden\" name=\"${property.name}_month\" id=\"${property.name}_month\" value=\"<g:formatDate date=\"\${${domainInstance}?.${property.name}}\" format=\"MM\" />\"/>" 
      out << "<input type=\"hidden\" name=\"${property.name}_year\" id=\"${property.name}_year\" value=\"<g:formatDate date=\"\${${domainInstance}?.${property.name}}\" format=\"yyyy\" />\"/>" 
      out << """<g:javascript> 
          \$(document).ready(function() { 
           \$("#${property.name}_datepicker").datepicker({ 
            dateFormat:'dd/MM/yy', 
            onClose: function(dateText, inst) { 
              var date = new Date(dateText.replace(/(\\d+).(\\d+).(\\d+)/, '\$3/\$2/\$1')); 
              if (!isNaN(date)) { 
               \$("#${property.name}_month").val(date.getMonth()+1); 
               \$("#${property.name}_day").val(date.getDate()); 
               \$("#${property.name}_year").val(date.getFullYear()); 
              } 
             }, 
            showAnim: "slide", 
            showOptions: {direction: 'up'}, 
            showOn: "both", 
            autoSize: true, 
            constrainInput: true, 
            showButtonPanel: true 
           }); 
          }) 
         </g:javascript>""" 
      return out.toString() 
     } 
    } 
} 

通過這樣做，我們可以用jQuery替換默認的日期選擇器ui的日期選擇器用戶界面

Answer 2

這樣做的一種方式是在JavaScript層上作爲漸進式增強。

它具有保持模板不變的優點。

這可以通過在grails datepicker生成的DOM上添加一個jquery live hook來完成。

繼承人是我在一個項目中提出了：

 $("input[type=hidden][value='date.struct']").live(function(evt){ 
      var dateSelect = $(this).next(); 
      var monthSelect = dateSelect.next(); 
      var yearSelect = monthSelect.next(); 
      yearSelect.after("<button>Calendar</button>").next().button({ 
       icons: { 
        primary: "ui-icon-calendar" 
       }, 
       text: false 
      }).on('click',function(evt){ 
      var comp = $(this); 
      comp.datepicker("dialog",null,function(dateText, inst) { 

       var dateArray = dateText.split("/"); 

       monthSelect.val(parseInt(dateArray[0]).toString()); 
       dateSelect.val(parseInt(dateArray[1]).toString()); 
       yearSelect.val(parseInt(dateArray[2]).toString()); 

      },{} 
      ,evt).datepicker("widget").css("z-index","9999"); 
      var syncDate = function(){ 
       //Depends on Locale 
       var newDate = monthSelect.val()+'/'+dateSelect.val()+'/'+yearSelect.val(); 
       comp.datepicker("setDate", newDate); 
      }; 
      syncDate(); 
      dateSelect.on("change", syncDate); 
      monthSelect.on("change", syncDate); 
      yearSelect.on("change", syncDate); 
      return false; 
     }); 
     });