thymeleaf支持java8的日期实例

时间:2023-03-09 08:45:50
thymeleaf支持java8的日期实例

一、实体

@Entity
public class Customer {
@Id
@GenericGenerator(name="generator",strategy = "native")
@GeneratedValue(generator = "generator")
private Long customerId; @Column(nullable = false)
private String filesNo; //档案号 @Column(nullable = false)
@NotBlank(message ="姓名不能为空")
private String customerName;//客户姓名 @Column(nullable = false)
@NotBlank(message ="入住房号不能为空")
private String inRoomNum;//入住房号 @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm")
private LocalDateTime inDate;//入室时间 @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm")
private LocalDateTime outDate; //离室时间 private Integer actualInDays;//实际入住天数
}

二、dao,service,controller等这些都是常规写法

三、页面

                <div class="form-group">
<label class="col-sm-1 control-label">入室时间</label>
<div class="col-sm-5">
<input type="text" class="form-control date form_datetime" name="inDate"
placeholder="入室时间" th:value="${#temporals.format(customer.inDate,'yyyy-MM-dd HH:mm')}">
</div> <label class="col-sm-1 control-label">离室时间</label>
<div class="col-sm-5">
<input type="text" class="form-control date form_datetime" name="outDate"
placeholder="离室时间" th:value="${#temporals.format(customer.outDate,'yyyy-MM-dd HH:mm')}">
</div>
</div> <div class="form-group">
<label class="col-sm-1 control-label">生日</label>
<div class="col-sm-5">
<input type="text" class="form-control date form_date" name="birthday"
placeholder="生日" th:value="${#temporals.format(customer.birthday,'yyyy-MM-dd')}">
</div> <label class="col-sm-1 control-label">身份证</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="idCard" placeholder="身份证" th:value="${customer.idCard}">
</div>
</div>

四、脚本

<script type="text/javascript">
$(document).ready(function() { $('.form_datetime').datetimepicker({
format:'yyyy-mm-dd hh:ii',
language: 'zh-TW',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0
// showMeridian: 1
});
$('.form_date').datetimepicker({
format:'yyyy-mm-dd',
language: 'zh-TW',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
$('.form_time').datetimepicker({
format:'hh:ii',
language: 'zh-TW',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
});
</script>

五、需要引入的css和js

    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-datetimepicker.css"> <script src="jquery/jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/bootstrap-datetimepicker.js"></script>
<script src="bootstrap/js/bootstrap-datetimepicker.zh-TW.js"></script>
bootstrap-datetimepicker.zh-TW.js这里可以使用CN,其实两个文件内容完全一样。