thymeleaf支持java8的日期实例

时间:2022-06-13 19:05:30

一、实体

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