如果以D/M而不是DD/MM的形式输入日期或月份，则将前导零添加到日期字段

Question

我在Thymeleaf模板中有日期输入代码：

<div class="m-form-row__content">
    <ul class="m-textbox-group" data-module="a-autojump">
        <li class="m-textbox-group__item"><label
            class="m-textbox-group__item-label" for="pHolder.dobDay">Day</label>

            <input type="text" id="pHolder.dobDay"
            th:field="*{pHolder.dobDay}" placeholder="DD"
            class="a-textbox a-textbox--2-character" maxlength="2" /></li>
        <li class="m-textbox-group__item"><label
            class="m-textbox-group__item-label" for="pHolder.dobMonth">Month</label>

            <input type="text" id="pHolder.dobMonth"
            th:field="*{pHolder.dobMonth}" placeholder="MM"
            class="a-textbox a-textbox--2-character" maxlength="2" /></li>
        <li class="m-textbox-group__item"><label
            class="m-textbox-group__item-label" for="pHolder.dobYear">Year</label>

            <input type="text" id="pHolder.dobYear"
            th:field="*{pHolder.dobYear}" placeholder="YYYY"
            class="a-textbox a-textbox--4-character" maxlength="4" /></li>
    </ul>
</div>

日期格式应为DD/MM/YYYY，但当前如果输入了类似于D/M/YYYY的内容，则没有验证捕捉到这一点，并且会在下游应用程序中导致错误。我想添加一些功能，其中如果d或M的长度为1，则添加前导零

下面是我尝试使用JSP和JavaScript完成的一个示例：

<div class="input">
    <div class="textfield inputGroup">
    <form:input path="proposer.dobDay" id="proposer.dobDay"
    cssClass="input-text small dayfield only-digits validateFrontend" size="3" maxlength="2"
    onkeyup="moveOnMaxDob(this,'proposer.dobMonth')" onchange="joinDOBVal()" />
    <form:input path="proposer.dobMonth" id="proposer.dobMonth"
    cssClass="input-text small monthfield only-digits validateFrontend" size="3" maxlength="2"
    onkeyup="moveOnMaxDob(this,'proposer.dobYear')" onchange="joinDOBVal()"/>
    <form:input path="proposer.dobYear" id="proposer.dobYear"
    cssClass="input-text small yearfield only-digits validateFrontend" size="5" maxlength="4"
    onchange="joinDOBVal()"/>
    <span class="validIcon"></span>
    <div class="errorContainerContact"></div>
    <!-- hidden fields for full dob -->
    <form:hidden path="proposer.dob" id="proposer.dob"/>
    </div>
    <div class="errorContainer dob">
        <form:errors path="proposer.dob" cssClass="field-validation-error" htmlEscape="false" />
   </div>
</div>

function joinDOBVal() {
    var day = document.getElementById("proposer.dobDay").value;
    var month = document.getElementById("proposer.dobMonth").value;
    var year = document.getElementById("proposer.dobMonth").value;
    if (IsNumeric(day) == true && IsNumeric(month) == true
            && IsNumeric(year) == true) {

        if(day != "" && day.length == 1 && day != "0") {
            day = "0"+day;
            document.getElementById("proposer.dobDay").value = day;
        }
        if(month != "" && month.length == 1 && month != "0") {
            month = "0"+month;
            document.getElementById("proposer.dobMonth").value = month;
        }
        if ((year != "") && (year.length == 4)) {
            var fullDob = day + "/" + month + "/" + year;
            document.getElementById("proposer.dob").value = fullDob;
        } else {
            document.getElementById("proposer.dob").value = "";
        }
    } else {
        document.getElementById("proposer.dob").value = "";
    }
}

我想也许我可以做一些事情，但不完全是这样：

<input th:if="${policyHolder.dobDay.count} &gt; 1" type="text" id="pHolder.dobDay"
            th:field="*{pHolder.dobDay}" placeholder="DD"
            class="a-textbox a-textbox--2-character" maxlength="2" />
<input th:if="${policyHolder.dobDay.count} &eq; 1" type="text" id="pHolder.dobDay"
            th:field="0*{pHolder.dobDay}" placeholder="DD"
            class="a-textbox a-textbox--2-character" maxlength="2" />

更新

我的理解是label将值传递给input，例如for="policyHolder.dobDay"和id="policyHolder.dobDay"。是否可以在label中执行某种th:if操作，以便将所需的值传递给输入