如何在 thymeleaf 中的每个循环中获取字符串值并将其应用于带有 javascript/jquery 的模态中的日期字段？

Question

我的应用程序包含一个事件日历。在 thymeleaf 中，月份和日期在每个循环中作为来自控制器的 Map 检索，其键是作为 String 的日期，并为当天的用户内容赋值 - 但内容在这里无关紧要，只有键。日历的每个键都有一个框，用户可以单击它。当用户单击它时，link with class '.nBtn' 打开一个（Bootstrap 模态框），其中包含一个日期类型字段供用户设置日期。我想打开模式，日期设置为点击日期显示在日期字段中，但我不知道如何从 thymeleaf 中的每个循环访问密钥。当用户单击日历中的相应日期时，如何让 eachDay.key 填充模式中的日期字段？能否请你帮忙？

注意：我无法从控制器中检索模型，因为此对象仅在用户单击模态中的提交按钮后创建。因此，数据库中没有要检索的对象。

<div class="days">
   <div class="day-cell button" th:each="eachDay : ${daysOfTheMonth}">

        <a class="nBtn">
           <input type="hidden" id="eachday" value="${eachDay.key}" />

           <span class="round-day" th:text="${#strings.substring(eachDay.key,8)}"></span>
           <span class="day-content" th:text="${eachDay.value}"></span>
        </a>
    </div> <!-- /day-cell -->
</div> <!-- /days -->
                        </div> <!-- /calendar -->

<div class="myForm">
    <form th:action="@{/eventController/saveEvent}" method="post">
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-abelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Verfügbar werden</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="date" class="col-form-label">Datum:</label>
                        <input type="date" class="form-control mb-10 col-6" id="date" name="date" value="" />
                </div> 
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" value="Speichern" />
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>
</form>
</div>

<script>
    $(document).ready(function(){   
        $('.nBtn').on('click',function(evt){
            evt.preventDefault();
            $('.myForm #exampleModal').modal();
        });                     

    });
</script>

Answer 1

您可以将自定义参数分配给 a.nBtn，这些参数可以在 jQuery 代码中访问并分配给表单元素。类似于：

<a class="nBtn" th:args="data-day=${eachDay.key}"> 
 <!-- Other HTML -->
</a>

在Javascript中：

$('.nBtn').on('click',function(evt){
    evt.preventDefault();
    var day = $(evt).data('day');
    //TODO: You will have to format the day into a format accepted by input type date.
    $("#date").val(day)
    $('.myForm #exampleModal').modal();
});

注意： - 确保将日期格式化为 input type='date' 接受的格式 - 确保您为隐藏元素 #eachday 生成的 ID 是唯一的。如果您希望将其作为表单数据提交给服务器，您可以使用相同的名称，但最好保持不同的 ID。

如何在 thymeleaf 中的每个循环中获取字符串值并将其应用于带有 javascript/jquery 的模态中的日期字段？

How to get the string value in each loop in thymeleaf and apply it to a date field in a modal with javascript/jquery?

javascript

jquery

modal-dialog

thymeleaf

spring-boot