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

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，看起来像我设置输入控件（就像我为独立页面所做的那样），但我现在给输入一个开始日期时间。

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事件仍然有效。

在这里查看渲染表单 - 使用'edit'操作，而后者又使用标准支架与<f:all调用我的_wrapper.gsp。

日期的字符串值变得很好（没有格式化），但我没有点击操作，日历也没有弹出 - 根本没有动作。我已经在为contractSignedDate属性打开的浏览器中包含了浏览器页面检查的片段。

所以，如果一个独立的页面gsp工作得很好（尽管Grails bau加载了Bootstrap 4）我的点击操作不会触发

那么为什么在使用main.gsp / normal fields插件/和_wrapper.gsp for java LocalDateTime时，gsp动作动作不能激活？它适用于独立的gsp示例，所以我知道datePicker的工作原理

我如何获得这里描述的Bootstrap datepicker以Grails脚手架形式工作？

PS它不缺少jqueryUI库 - 我已经在独立和main.gsp中包含了1.12.1，从检查器中看到这个图像。在独立但不使用main.gsp和scaffolded表单时工作正常

PS如果我点击_widget.gsp中显示的脚手架形式属性，外部文本框以蓝色突出显示（bau grails渲染元素没有 - 所以某种形式的点击操作正在发生 - 只是没有获得日历弹出。

Answer 1

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

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

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

如果你想要你需要的样式包括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>

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

所以我的工作application.js看起来像这样 - 我在其中包含我自己的LCM-app 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'之间添加了点 - 但是这会成为你标记中的一个空格

// 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并编辑了我在standlone页面中的cdn引用（现在为jQuery和Bootstrap禁用了资源插件）

main.gsp（head section） - 你不需要jquery UI就可以了

<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样式不匹配，对齐有点等等 - 但如果我可以获取提交操作等以获取所选日期并将包转换为LocalDateTime持久存储在数据库中。

基本上，如果grails <g:datePicker可以“修复”以使用新的Java时间格式并使用Bootstrap选择器会更好 - 因为fields插件调用<g:datePicker用于普通Java Date但完全不处理Java 8临时内容。

我试图'找到'grails <g: taglib的实现位置（认为它将出现在GSP插件或核心项目中 - 但我无法找到它。

然而，虽然它并不理想 - 它足够好用于使用脚手架的迷你演示我会向人们展示 - 只是看起来有点笨重，因为它不一致。

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

问题描述投票：-1回答：1

1个回答

最新问题

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

问题描述 投票：-1回答：1

1个回答

最新问题

问题描述投票：-1回答：1