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，其實兩個文件內容完全一樣。