Java 引导日历不支持';t打开
我有一个表单,它看起来很不错,但当我点击它时日历并没有打开。我花了很多时间试图解决这个问题 我使用这些依赖项(初学者除外)Java 引导日历不支持';t打开,java,bootstrap-4,view,thymeleaf,Java,Bootstrap 4,View,Thymeleaf,我有一个表单,它看起来很不错,但当我点击它时日历并没有打开。我花了很多时间试图解决这个问题 我使用这些依赖项(初学者除外) org.webjars 标题: 说明: 日期: 提交表格 $.fn.datetimepicker.Constructor.Default=$.extend({},$.fn.datetimepicker.Constructor.Default{ 图标:{ 时间:'远发钟', 日期:'远法日历', 向上:“fas fa arrow up”, 向下:“fas
org.webjars
-
-
-
-
标题:
说明:
日期:
提交表格
$.fn.datetimepicker.Constructor.Default=$.extend({},$.fn.datetimepicker.Constructor.Default{
图标:{
时间:'远发钟',
日期:'远法日历',
向上:“fas fa arrow up”,
向下:“fas fa箭头向下”,
上一篇:'fas fa雪佛龙左',
下一个:“fas fa chevron right”,
今天:“fa-calendar-check-o”,
清楚:'远法垃圾',
结束语:“远法时代”
} });
$('#datetimepicker1')。datetimepicker({
格式:“DD/MM/YYYY h:MM A”
});
如果您能告诉我如何返回不推荐日期的LocalDateTime对象instad,我将不胜感激。
我非常感谢你的帮助
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.0.0-2</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.30</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>5.11.2</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.2</version>
<scope>provided</scope>
</dependency>
Here is my html
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Spring Boot Thymeleaf Application - Bootstrap Date Time Picker</title>
<link th:rel="stylesheet" th:href="@{/assets/tempusdominus-bootstrap-4/tempusdominus-bootstrap-4.min.css}"/>
<link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
<link th:rel="stylesheet" th:href="@{/webjars/font-awesome/5.11.2/css/all.css} "/>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="/">Thymeleaf - Bootstrap Date Time Picker</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<form method="post" th:object="${event}">
<div class="form-group">
<label for="title">Title:</label>
<input type="text" id="title" placeholder="Title" autocomplete="off" class="form-control"
th:field="*{title}"/>
</div>
<div class="form-group">
<label for="description">Description:</label>
<textarea type="text" rows="2" id="description" placeholder="Description" class="form-control"
th:field="*{description}" autocomplete="off"></textarea>
</div>
<div class="form-group">
<label for="date">Date:</label>
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"
th:field="*{date}" id="date" placeholder="Date"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar-alt"></i></div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</div>
</div>
</div>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/moment/moment.min.js}"></script>
<script th:src="@{/assets/tempusdominus-bootstrap-4/tempusdominus-bootstrap-4.min.js}"></script>
<script>
$.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
icons: {
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'far fa-calendar-check-o',
clear: 'far fa-trash',
close: 'far fa-times'
} });
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY h:mm A'
});
</script>
</body>
</html>