一、实体
@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,其实两个文件内容完全一样。