Add placeholder YYYY-MM-DD for date input field

Closes gh-303

Add placeholder YYYY-MM-DD for date input field
d92a4218 · Antoine Rey · Stephane Nicoll · fadf7f4d · d92a4218 · d92a4218
Commit d92a4218 authored 7 years ago by Antoine Rey Committed by Stephane Nicoll 7 years ago
--- a/src/main/resources/templates/fragments/inputField.html
+++ b/src/main/resources/templates/fragments/inputField.html
 <html>
 <body>
  <form>
-    <th:block th:fragment="input (label, name)">
+    <th:block th:fragment="input (label, name, type)">
      <div th:with="valid=${!#fields.hasErrors(name)}"
        th:class="${'form-group' + (valid ? '' : ' has-error')}"
        class="form-group">
        <label class="col-sm-2 control-label" th:text="${label}">Label</label>
        <div class="col-sm-10">
-          <input class="form-control" type="text"
-            th:field="*{__${name}__}" />
+            <div th:switch="${type}">
+                <input th:case="'text'" class="form-control" type="text" th:field="*{__${name}__}" />
+                <input th:case="'date'" class="form-control" type="text" th:field="*{__${name}__}"
+                        placeholder="YYYY-MM-DD" title="Enter a date in this format: YYYY-MM-DD"
+                        pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"/>
+            </div>
          <span th:if="${valid}"
            class="glyphicon glyphicon-ok form-control-feedback"
            aria-hidden="true"></span>

--- a/src/main/resources/templates/owners/createOrUpdateOwnerForm.html
+++ b/src/main/resources/templates/owners/createOrUpdateOwnerForm.html
@@ -7,15 +7,15 @@
  <form th:object="${owner}" class="form-horizontal" id="add-owner-form" method="post">
    <div class="form-group has-feedback">
      <input
-        th:replace="~{fragments/inputField :: input ('First Name', 'firstName')}" />
+        th:replace="~{fragments/inputField :: input ('First Name', 'firstName', 'text')}" />
      <input
-        th:replace="~{fragments/inputField :: input ('Last Name', 'lastName')}" />
+        th:replace="~{fragments/inputField :: input ('Last Name', 'lastName', 'text')}" />
      <input
-        th:replace="~{fragments/inputField :: input ('Address', 'address')}" />
+        th:replace="~{fragments/inputField :: input ('Address', 'address', 'text')}" />
      <input
-        th:replace="~{fragments/inputField :: input ('City', 'city')}" />
+        th:replace="~{fragments/inputField :: input ('City', 'city', 'text')}" />
      <input
-        th:replace="~{fragments/inputField :: input ('Telephone', 'telephone')}" />
+        th:replace="~{fragments/inputField :: input ('Telephone', 'telephone', 'text')}" />
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">

--- a/src/main/resources/templates/pets/createOrUpdatePetForm.html
+++ b/src/main/resources/templates/pets/createOrUpdatePetForm.html
@@ -17,9 +17,9 @@
        </div>
      </div>
      <input
-        th:replace="~{fragments/inputField :: input ('Name', 'name')}" />
+        th:replace="~{fragments/inputField :: input ('Name', 'name', 'text')}" />
      <input
-        th:replace="~{fragments/inputField :: input ('Birth Date', 'birthDate')}" />
+        th:replace="~{fragments/inputField :: input ('Birth Date', 'birthDate', 'date')}" />
      <input
        th:replace="~{fragments/selectField :: select ('Type', 'type', ${types})}" />
    </div>

--- a/src/main/resources/templates/pets/createOrUpdateVisitForm.html
+++ b/src/main/resources/templates/pets/createOrUpdateVisitForm.html
@@ -31,9 +31,9 @@
  <form th:object="${visit}" class="form-horizontal" method="post">
    <div class="form-group has-feedback">
      <input
-        th:replace="~{fragments/inputField :: input ('Date', 'date')}" />
+        th:replace="~{fragments/inputField :: input ('Date', 'date', 'date')}"  />
      <input
-        th:replace="~{fragments/inputField :: input ('Description', 'description')}" />
+        th:replace="~{fragments/inputField :: input ('Description', 'description', 'text')}" />
    </div>

    <div class="form-group">