Это очень странно.При ссылке на автономный gsp и ссылку JS / CSS из CDN страница работала.
Если я добавлю <meta name="layout" content="main" /> и страница будет визуализирована с помощью сетки сайта в main.gsp, то произойдет сбой.
Я пробовал много разных комбинаций на отдельной странице <head>, и в основном сборщику даты, похоже, не нужен загрузчик js для работы - но для этого нужен jQuery, и он должен находиться в разделе head.
Если вы хотите, чтобы стили были включены в файл bootstrap.css и CSS для bootstrap-datepicker3.
<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 и удалить записи для Bootstrap и jQuery, используя локальные копии в / assets / javascripts, и вместо этого ссылаться на них непосредственно из cdn в main.gsp.
Таким образом, мой рабочий application.js выглядит следующим образом - где я включаю свое собственное JM-приложение LCM:
// 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
Мое js-приложение LCM просто выглядит так, где мой селектор использует классселектор - обратите внимание, что вы, кажется, добавили точку между группой и датой '.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 и отредактировал вссылки 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 не совпадают, выравнивание немного выпало и т.д., но это улучшение, если я могупросто получите действие отправки и т. д., чтобы взять выбранную дату и преобразовать пакет в LocalDateTime, чтобы сохранить его в базе данных.
По существу, было бы лучше, если бы grails <g:datePicker можно было «фиксировать» для работы с новым временем Javaформатирует и использует средство выбора Bootstrap - потому что плагин fields вызывает <g:datePicker для обычной даты Java, но полностью не обрабатывает временные вещи Java 8.
Я пытался «найти», где grails <g: taglib реализован (думал, что это будет в плагине GSP или в базовых проектах - но я не могу найти его ни в одном из них.
Однако, хотя он не идеален - его вполне достаточно для мини-демонстрации с использованием скаффолдов.собирался показать людям - просто выглядит немного неуклюже, поскольку это не соответствует.
