Thymeleaf - Add leading zero to date field if day or month is entered as D/M instead of DD/MM

[paul a carron]

I have this code for date entry in a Thymeleaf template:

  <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>
   

The date format should be DD/MM/YYYY but currently if something like  D/M/YYYY is entered no validation catches this and it causes an error in  a downstream application. I'd like to add some functionality where a  leading zero is added if the length of D or M are 1.

An example of what I'm trying to do but done with JSP and JavaScript are as follows:

  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 = "";        }    }
Think maybe I could do something along the lines of but not quite this:

  <input th:if="${pHolder.dobDay.count} > 1" type="text" id="pHolder.dobDay"                th:field="*{pHolder.dobDay}" placeholder="DD"                class="a-textbox a-textbox--2-character" maxlength="2" />    <input th:if="${pHolder.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" />

[Al Hobbs]

Why does it cause a problem downstream?  Maybe you should handle that on the backend or have a drop list on the frontend.