常用插件的用法

一. 模型提示

  <!--/*@thymesVar id="stockConfigModel" type="com.yunlei.wx.stockconfig.domain.StockConfig"*/-->
 说明：
 将要在页面上使用的变量，使用此注释进行标识，就可以在html页面获取model的智能提示

二. select 下拉框插件

1.引入select的相关信息

<!-- select2下拉框插件 -->
<div th:fragment="select2-css">
    <link th:href="@{/static/ajax/libs/select2/select2.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/ajax/libs/select2/select2-bootstrap.css}" rel="stylesheet"/>
</div>
<div th:fragment="select2-js">
    <script th:src="@{/static/ajax/libs/select2/select2.min.js}"></script>
</div>

2.使用select2
<select class="js-example-basic-multiple" multiple="multiple" th:field="*{selectedValues}">
    <option th:each="option : ${options}" th:value="${option.id}" th:text="${option.name}"></option>
</select>

3.初始化Select2并回显值 
<script th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {
    var selectedValues = /*[[${selectedValues}]]*/; // 从Thymeleaf变量获取已选值
    $('.js-example-basic-multiple').select2({
        placeholder: '选择一个或多个选项',
        data: /*[[${options}]]*/  // 这里传入所有选项数据，以便Select2能正确初始化显示所有选项
    });
    
    // 设置回显已选的值
    $('.js-example-basic-multiple').val(selectedValues).trigger('change');
});
/*]]>*/
</script>

说明：
Thymeleaf变量：确保你的控制器方法返回的模型中包含options（所有选项）和selectedValues（已选的值）。selectedValues应该是一个包含选项ID的数组。

JavaScript处理：在文档加载完毕后，通过.val()方法设置Select2组件的值为已选的值数组，然后触发change事件以确保Select2正确更新显示。

示例控制器方法：

4. 后台代码
@GetMapping("/your-page")
public String yourPage(Model model) {
    List<Option> options = Arrays.asList(new Option(1, "选项1"), new Option(2, "选项2"), new Option(3, "选项3")); // 示例选项数据
    List<Integer> selectedValues = Arrays.asList(1, 3); // 示例已选值
    model.addAttribute("options", options);
    model.addAttribute("selectedValues", selectedValues);
    return "your-template"; // 返回模板名称
}

三. 时间选择器插件

1.展示成时分秒的格式
新增时的HTML
<div class="form-group">
                    <label class="col-sm-2 control-label">每日开始时间：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="dailyStartTime" name="dailyStartTime" placeholder="HH:mm:ss" value="00:00:00" readonly>
                    </div>

                    <label class="col-sm-2 control-label">每日结束时间：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="dailyEndTime" name="dailyEndTime" placeholder="HH:mm:ss" value="23:59:59" readonly>
                    </div>
</div>

js初始化部分：
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        var startDate = laydate.render({
            elem: '#dailyStartTime',
            max: $('#dailyEndTime').val(),
            type: 'time',
            theme: 'molv',
            trigger: 'click',
            done: function (value, date) {
                // 结束时间大于开始时间
                if (value !== '') {
                    endDate.config.min.hours = date.hours;
                    endDate.config.min.minutes = date.minutes;
                    endDate.config.min.seconds = date.seconds + 1;
                } else {
                    endDate.config.min.hours = '';
                    endDate.config.min.minutes = '';
                    endDate.config.min.dates = '';
                }
            }
        });

        var endDate = laydate.render({
            elem: '#dailyEndTime',
            min: $('#dailyStartTime').val(),
            type: 'time',
            theme: 'molv',
            trigger: 'click',
            done: function (value, date) {
                // 开始时间小于结束时间
                if (value !== '') {
                    startDate.config.max.hours = date.hours;
                    startDate.config.max.minutes = date.minutes;
                    startDate.config.max.seconds = date.seconds - 1;
                } else {
                    startDate.config.max.hours = '';
                    startDate.config.max.minutes = '';
                    startDate.config.max.seconds = '';
                }
            }
        });
    });



修改时的HTML
<div class="form-group">
    <label class="col-sm-2 control-label">每日开始时间：</label>
    <div class="col-sm-4">
          <input type="text" class="form-control" id="dailyStartTime" name="dailyStartTime" placeholder="HH:mm:ss"
                               th:value="*{#temporals.format(activityConfig.dailyStartTime, 'HH:mm:ss')}" readonly>
    </div>

    <label class="col-sm-2 control-label">每日结束时间：</label>
       <div class="col-sm-4">
          <input type="text" class="form-control" id="dailyEndTime" name="dailyEndTime" placeholder="HH:mm:ss"
                               th:value="*{#temporals.format(activityConfig.dailyEndTime, 'HH:mm:ss')}" readonly>
    </div>
</div>



2.展示成按时间和日期格式

新增时html：
<div class="form-group">
                    <label class="col-sm-2 control-label">活动开始时间：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="effectiveTime" name="effectiveTime"
                               value=""
                               onFocus="WdatePicker({minDate:'#F{$dp.$D(\'effectiveTime\')||\'%y-%M-%d\'}',maxDate:'#F{$dp.$D(\'effectiveTime\')}',dateFmt:'yyyy-MM-dd HH:mm:ss',startDate:'%y-%M-%d 00:00:00'})"
                               placeholder="点击选择开始时间" readonly/>
                    </div>

                    <label class="col-sm-2 control-label">活动结束时间：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="expireTime" name="expireTime"
                               value=""
                               onFocus="WdatePicker({minDate:'#F{$dp.$D(\'effectiveTime\')||\'%y-%M-%d\'}',dateFmt:'yyyy-MM-dd HH:mm:ss',startDate:'%y-%M-%d 23:59:59'})"
                               placeholder="点击选择结束时间" readonly/>
                    </div>
</div>




修改时html：
<div class="form-group">
                    <label class="col-sm-2 control-label">开始时间：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="effectiveTime" name="effectiveTime"
                               th:value="${#dates.format(activityConfig.effectiveTime, 'yyyy-MM-dd HH:mm:ss')}"
                               onFocus="WdatePicker({minDate:'%y-%M-%d',maxDate:'#F{$dp.$D(\'effectiveTime\')}',dateFmt:'yyyy-MM-dd HH:mm:ss',startDate:'%y-%M-%d 00:00:00'})"
                               placeholder="点击选择开始时间" readonly/>
                    </div>

                    <label class="col-sm-2 control-label">结束时间：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="expireTime" name="expireTime"
                               th:value="${#dates.format(activityConfig.expireTime, 'yyyy-MM-dd HH:mm:ss')}"
                               onFocus="WdatePicker({minDate:'#F{$dp.$D(\'effectiveTime\')}',dateFmt:'yyyy-MM-dd HH:mm:ss',startDate:'%y-%M-%d 23:59:59'})"
                               placeholder="点击选择结束时间" readonly/>
                    </div>
                </div>

说明：
新增的时候，开始时间的 <code></code>