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

我的应用程序包含一个事件日历。在百里香中,每个月都从控制器中以Map的形式在每个循环中检索月日,其键是将天作为String并为该天的用户内容赋值-但这里的内容无关紧要,只有键。日历的每个键都有一个框,用户可以单击该框。当用户单击它时,类为'.nBtn'的链接将打开一个带有日期类型字段的(引导程序模式框),供用户设置日期。我想用日期字段中显示的单击天设置的日期打开模式,但是我不知道如何从百里香的每个循环中访问键。当用户单击日历中的相应日期时,如何使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>
daluoxi 回答:如何在thymeleaf的每个循环中获取字符串值并将其应用于使用javascript / jquery的模式中的日期字段?

您可以将自定义参数分配给a.nBtn,可以在jQuery代码中访问该自定义参数并将其分配给表单元素。像这样:

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

在Java语言中:

$('.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。

本文链接:https://www.f2er.com/3048746.html

大家都在问