Question

在grails脚手架中，通常有3或4个选择字段用于输入日期。我们可以改变'render Editor.template'，以便我们可以使用jquery ui datepicker。

Answer 1

这样做的一种方法是在JavaScript层上作为渐进增强。

它具有保持模板不受影响的优点。

这可以通过在grails datepicker生成的DOM上添加jquery live hook来完成。

Heres是我在项目中提出的：

        $("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;
        });
        });

Answer 2

在grails模板中成功集成了jquery UI datepicker

使用以下代码替换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 datepicker

替换grails的默认日期选择器ui

Jquery ui datepicker而不是grails scaffolding中的select字段

2 个答案: