Question

我正在尝试是否可以在Grails v3.3.9 / fields插件2.2.10中使Bootstrap datePicker（datePicker）正常工作

我已经完成了一个独立页面，即创建了一个控制器，并给它一个名为“ ldt”的动作。

我这样创建了名为ldt.gsp的grails视图。当我点击触发浏览器中的控制器时，这个简单的页面可以很好地显示并且datePicker可以正常工作

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap datepicket demo</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
    <script type='text/javascript'>
        $(function(){
            //$('.input-group.date').datepicker({
            $('#datepicker').datepicker({

                calendarWeeks: true,
                todayHighlight: true,
                autoclose: true
            });
        });

    </script>
</head>
<body>
<div class="container">
    <h1>Bootstrap datepicker</h1>
    <div class="input-group date" id="datepicker">
        <input type="text" class="form-control">
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
    </div>
</div>
</body>
</html>

您可以在这里看到。这不是使用普通的Grails网站网格等

所以我试图将其放入views / layouts / main.gsp

这是我修改后的main.gsp的开头部分。（我没有包括Bootstrap或jQuery，因为它们带有grails application.js）。

<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>
        <g:layoutTitle default="Grails"/>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <asset:link rel="icon" href="favicon.ico" type="image/x-ico"/>

    <asset:stylesheet src="application.css"/>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
    <script type='text/javascript'>
        $(function(){
            $('#datepicker').datepicker({

                calendarWeeks: true,
                todayHighlight: true,
                autoclose: true
            });
        });

    </script>


    <g:layoutHead/>

    <%-- header assets --%>

</head>....

现在，我试图在域类中呈现特定字段-类型为LocalDateTime。为了尝试执行此操作，我创建了一个_fields / localDateTime / _wrapper.gsp，它看起来像这样，其中设置了输入控件（就像我对独立页面所做的一样），但是现在给输入一个开始日期时间。 / p>

localDateTime / _wrapper.gsp

<%@ page import="java.time.LocalDateTime; java.time.format.DateTimeFormatter" %>
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<div class="fieldcontain" >
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class="input-group date" id='datetimepicker1' >
                        <label for=${this.pageScope.property}> ${this.pageScope.getVariable("label")} </label>
                        <input type='text' class="form-control" value="${java.time.LocalDateTime.now().toString()}"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

当我在浏览器中转到此页面时，该页面将被渲染，但可点击字段行为等不会触发，并且该字段的右侧没有日历图标（这可能是因为Grails正在加载Bootstrap 4，以及当我尝试使用v4.3.1的独立版本，图标未呈现-但click事件仍然有效）。

在此处查看呈现的表单-使用“编辑”操作，该操作依次使用带有<f:all的标准支架，该支架称为我的_wrapper.gsp。

日期的字符串值可以很好地呈现（未格式化），但我却没有点击操作，并且日历也没有弹出-没有任何操作。我在为contractSignedDate属性打开的浏览器中包含了浏览器页面检查的片段。

因此，如果独立页面gsp正常工作（尽管Grails bau加载了Bootstrap 4），我的点击操作不会触发

那么，当将main.gsp / normal字段plugin /和_wrapper.gsp用于Java LocalDateTime时，为什么gsp action操作无法触发？它适用于独立的gsp示例，所以我知道datePicker可以工作

如何获得此处所述的Bootstrap datepicker以Grails支架形式工作？

PS它不缺少jqueryUI库-我在独立版本和main.gsp中都包含1.12.1，请从检查器中查看此图像。在独立版本上正常运行，但不使用main.gsp和脚手架形式

如果我按一下_widget.gsp所示的scaffolded form属性，则外部文本框将突出显示为蓝色（bau grails呈现的元素不会显示-因此发生了某种形式的click动作-只是没有弹出日历。

Answer 1

这很奇怪。当在独立的gsp上引用并从CDN链接JS / CSS时，该页面将起作用。

如果我添加<meta name="layout" content="main" />并通过main.gsp中的站点网格物体渲染页面，则会失败。

我在独立页面<head>中尝试了许多不同的组合，基本上日期选择器似乎不需要引导js才能工作-但它确实需要jQuery，并且必须在标题部分。

如果需要样式，则需要包含bootstrap.css和bootstrap-datepicker3 CSS。

<head>

    <%--<meta name="layout" content="main" />--%>
    <title>Bootstrap datepicket demo</title>


    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <%--<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> --%>

    <script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

</head>

但是，如果您取消注释meta标签，它将全部停止。最后，要使它生效，我必须编辑/assets/application.js并使用/ assets / javascripts中的本地副本删除Bootstrap和jQuery的条目，而直接从main.gsp中的cdn引用这些条目。

所以我的工作application.js看起来像这样-我在其中包含了自己的LCM应用JS：

// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//= require LCM-app
//= require popper.min
//= require_self

我的LCM-app js看起来像这样，其中我的选择器正在使用类选择器-请注意，您似乎已经在组和日期'.input-group.date'之间添加了点-但这在标记中成为空格< / p>

// used by bootstrap date picker - matching class selector is for class class='.input-group date'
$(function(){
    $('.input-group.date').datepicker({
        calendarWeeks: true,
        todayHighlight: true,
        autoclose: true
    });
});

然后我进入main.gsp并在独立页面中编辑了cdn引用（现在，jQuery和Bootstrap的资产插件已禁用）

main.gsp（头部）-您不要需要jqueryUI才能运行

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>
        <g:layoutTitle default="Grails"/>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <asset:link rel="icon" href="favicon.ico" type="image/x-ico"/>

    <asset:stylesheet src="application.css"/>

    <%-- <script type='text/javascript' src='//code.jquery.com/jquery-1.12.1.js'></script>--%>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>


    <g:layoutHead/>

    <%-- header assets --%>

</head>

现在，当您在独立页面中取消注释<meta>标记并删除直接引用时-main.gsp站点网格将这些内容完全添加回独立页面中

将浏览器指向测试页，一切正常。

当我将基本代码放入taglib时，它甚至可以工作（您必须停止使用静态encodeAsForTags进行转义，并为标签设置为“ none”）。

JdtDateTimeTagLib
class JavaDateTimeTagLib {
    static defaultEncodeAs = [taglib:'html']
    //static encodeAsForTags = [tagName: [taglib:'html'], otherTagName: [taglib:'none']]
    static encodeAsForTags = [ jdtScaffoldField:'none']

    static namespace = "jdt"        //java8 date time name space for tags

    GrailsNameUtils grailsNameUtils = new GrailsNameUtils()


    def jdtScaffoldField = {attrs, body ->

        assert grailsNameUtils

        String propertyName = attrs.propertyName ?: "unknown"
        String property = attrs.property ?: "unknown"
        String value = attrs.value
        String naturalName = grailsNameUtils.getNaturalName(propertyName)
        String label = attrs.label ?: 'unknown'

        String ldtStr = attrs.ldt


        String page = """
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<div class="fieldcontain" >
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group form-inline">
                    <label class='control-label' for="$propertyName"> ${label} </label>
                    <div class="input-group date"  >
                            <input type='text' class="form-control" value="${ldtStr?.toString()}"/>
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
"""

        out << page
    }


}

然后我可以简化_fields / localDateTime / _wrapper.gsp来使用该标签，像这样

<%@ page import="java.time.LocalDateTime; java.time.format.DateTimeFormatter" %>
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<jdt:jdtScaffoldField propertyName="xyc" label="my label"></jdt:jdtScaffoldField>

现在，当您进行常规grails编辑操作时，将显示我的字段和日历操作。

在此版本中，我丢失了变量，因为我没有将值传递给包装器并将它们转发到我的标签中-但我认为这不太难。照原样查看工作屏幕截图

可悲的是，Grails脚手架至少使用了自己的呈现方式，因此CSS样式不匹配，对齐方式有点不合时宜-但这是一种改进，如果我可以让Submit动作等来获取选定的日期，将pack转换为LocalDateTime以保留在数据库中。

基本上，最好将grails <g:datePicker“固定”为使用新的Java时间格式并使用Bootstrap选择器-因为fields插件为普通Java Date调用<g:datePicker，但是完全不能处理Java 8时态的东西。

我试图“找到”实施grails <g: taglib的位置（原本打算将其放置在GSP插件或核心项目中-但我都找不到它。

但是，虽然它并不理想-对于我要向人们展示的使用脚手架的迷你演示来说已经足够了-看起来有点笨拙，因为不一致。

使用Grails网站网格main.gsp在我的表单上无法使用Bootstrap日期选择器-但适用于独立表单

1 个答案: