教程里面使用了时间字段,常规的时间字段是使用时间选择器,但是在Bootstrap 4中没有找到datepicker插件,于是使用了第三方的插件,DatePicker
使用方法比较简单:
1、将网站压缩包中的css/javascript/fonts拷贝到asserts目录下;
2、在thymeleaf页面中加入如下代码:
<link href="/asserts/css/gijgo.min.css" th:href="@{/asserts/css/gijgo.min.css}" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/asserts/js/gijgo.min.js" th:src="@{/asserts/js/gijgo.min.js}"></script>
<div class="form-group">
<label >birth</label><br/>
<input id="datepicker" width="276" name="birth"/>
<script>
$('#datepicker').datepicker({
uiLibrary: 'bootstrap4',
format: 'yyyy-mm-dd',
value: '[[${emp!=null}?${#dates.format(emp.birth, "yyyy-MM-dd")}]]'
});
</script>
</div>
可以根据读取的数据对于控件的值进行预置。
注意:js与thymeleaf混合使用 引号必须嵌套时,必须单引号包裹 双引号,反之则会出现
SyntaxError: missing ) after argument list 的错误。