Merge pull request #10 from audioboxer217/feature/update_inputs_html5

Update to HTML5 Input Types
audioboxer217 · Oct 1, 2024 · b3425b5 · b3425b5
2 parents f971309 + 39d4cfb
commit b3425b5
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 60 deletions.
diff --git a/app.py b/app.py
@@ -1,13 +1,14 @@
-from flask import Flask, flash, render_template, redirect, request, abort, url_for
-from flask_login import LoginManager, UserMixin, login_required, login_user, logout_user
-from boto3.dynamodb.conditions import Key
-from datetime import datetime, timedelta, date
-from argon2 import PasswordHasher
-from argon2.exceptions import VerifyMismatchError
-import boto3
 import json
 import os
+from datetime import date, datetime, timedelta
+
+import boto3
 import stripe
+from argon2 import PasswordHasher
+from argon2.exceptions import VerifyMismatchError
+from boto3.dynamodb.conditions import Key
+from flask import Flask, abort, flash, redirect, render_template, request, url_for
+from flask_login import LoginManager, UserMixin, login_required, login_user, logout_user
 
 app = Flask(__name__)
 app.secret_key = os.urandom(12)
@@ -415,15 +416,9 @@ def handle_form():
             schools=school_list,
             enable_badges=badges_enabled,
             enable_address=address_enabled,
-            additional_stylesheets=[
-                dict(
-                    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css",
-                    integrity="sha384-5IbgsdqrjF6rAX1mxBZkKRyUOgEr0/xCGkteJIaRKpvW0Ag0tf6lru4oL2ZhcMvo",
-                )
-            ],
             additional_scripts=[
                 dict(
-                    src=f"https://maps.googleapis.com/maps/api/js?key={maps_api_key}&libraries=places&callback=initMap&solution_channel=GMP_QB_addressselection_v1_cA", # noqa
+                    src=f"https://maps.googleapis.com/maps/api/js?key={maps_api_key}&libraries=places&callback=initMap&solution_channel=GMP_QB_addressselection_v1_cA",  # noqa
                     async_bool="true",
                     defer="true",
                 ),
@@ -435,10 +430,6 @@ def handle_form():
                     src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js",
                     integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13",
                 ),
-                dict(
-                    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js",
-                    integrity="sha384-duAtk5RV7s42V6Zuw+tRBFcqD8RjRKw6RFnxmxIj1lUGAQJyum/vtcUQX8lqKQjp",
-                ),
                 dict(src=url_for("static", filename="js/form.js")),
             ],
         )
@@ -862,12 +853,6 @@ def edit_entry_page():
             button_style=button_style,
             schools=school_list,
             entry=entry,
-            additional_stylesheets=[
-                dict(
-                    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css",
-                    integrity="sha384-5IbgsdqrjF6rAX1mxBZkKRyUOgEr0/xCGkteJIaRKpvW0Ag0tf6lru4oL2ZhcMvo",
-                )
-            ],
             additional_scripts=[
                 dict(
                     src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js",
@@ -877,10 +862,6 @@ def edit_entry_page():
                     src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js",
                     integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13",
                 ),
-                dict(
-                    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js",
-                    integrity="sha384-duAtk5RV7s42V6Zuw+tRBFcqD8RjRKw6RFnxmxIj1lUGAQJyum/vtcUQX8lqKQjp",
-                ),
                 dict(src=url_for("static", filename="js/form.js")),
             ],
         )
@@ -1038,15 +1019,9 @@ def add_entry():
             schools=school_list,
             enable_badges=badges_enabled,
             enable_address=address_enabled,
-            additional_stylesheets=[
-                dict(
-                    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css",
-                    integrity="sha384-5IbgsdqrjF6rAX1mxBZkKRyUOgEr0/xCGkteJIaRKpvW0Ag0tf6lru4oL2ZhcMvo",
-                )
-            ],
             additional_scripts=[
                 dict(
-                    src=f"https://maps.googleapis.com/maps/api/js?key={maps_api_key}&libraries=places&callback=initMap&solution_channel=GMP_QB_addressselection_v1_cA", # noqa
+                    src=f"https://maps.googleapis.com/maps/api/js?key={maps_api_key}&libraries=places&callback=initMap&solution_channel=GMP_QB_addressselection_v1_cA",  # noqa
                     async_bool="true",
                     defer="true",
                 ),
@@ -1058,10 +1033,6 @@ def add_entry():
                     src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js",
                     integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13",
                 ),
-                dict(
-                    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js",
-                    integrity="sha384-duAtk5RV7s42V6Zuw+tRBFcqD8RjRKw6RFnxmxIj1lUGAQJyum/vtcUQX8lqKQjp",
-                ),
                 dict(src=url_for("static", filename="js/form.js")),
             ],
         )

diff --git a/static/js/form.js b/static/js/form.js
@@ -361,8 +361,6 @@ function calculateAge(dateString) {
     day: "2-digit",
     year: "numeric"
   });
-  $('#datepicker').datepicker('update', formattedBirthdate);
-  document.getElementById("birthdate").value = formattedBirthdate
 
   if (ageClass == "") {
     document.getElementById("ageClass").innerHTML = "<b style='color:red;'>Competitors must be at least 4 years old!</b>"
@@ -404,7 +402,4 @@ function toggleMedsList() {
     document.getElementById("meds_list").required = false;
     document.getElementById("meds_list").value = '';
   }
-}
-$(function () {
-  $('#datepicker').datepicker();
-});
+}
diff --git a/templates/edit.html b/templates/edit.html
@@ -20,7 +20,9 @@ <h1>{{ entry.full_name.S }}</h1>
       </div>
       <div class="col-md-6">
         <label for="inputPhone" class="form-check-label h5">Phone</label>
-        <input type="text" class="form-control" name="phone" id="inputPhone" value="{{ entry.phone.S }}" pattern="^\d{3}-\d{3}-\d{4}$" oninvalid="setCustomValidity('Please enter a valid phone number.')" oninput="setCustomValidity('')" onchange="formatPhoneNumber(this.value)" required>
+        <input type="tel" class="form-control" name="phone" id="inputPhone" value="{{ entry.phone.S }}"
+          pattern="^\d{3}-\d{3}-\d{4}$" oninvalid="setCustomValidity('Please enter a valid phone number.')"
+          oninput="setCustomValidity('')" onchange="formatPhoneNumber(this.value)" required>
       </div>
     </div>
     {% if entry.reg_type.S == 'competitor' %}
@@ -30,12 +32,8 @@ <h1>{{ entry.full_name.S }}</h1>
           <div class="col-md-8">
             <label class="form-check-label h5" for="date">Birthday</label>
             <div class="input-group date">
-              <input class="form-control" type="text" name="birthdate" id="birthdate" value="{{ entry.birthdate.S }}" data-provide="datepicker" onchange="calculateAge(this.value)" required>
-              <span class="input-group-append">
-                <span class="input-group-text bg-light d-block">
-                  <i class="fa fa-calendar"></i>
-                </span>
-              </span>
+              <input class="form-control" type="date" name="birthdate" id="birthdate" value="{{ entry.birthdate.S }}"
+                onchange="calculateAge(this.value)" required \>
             </div>
           </div>
           <div class="col-md-2">

diff --git a/templates/partials/form_class.html b/templates/partials/form_class.html
@@ -3,13 +3,9 @@
       <div class="row g-3">
         <div class="col-md-8">
           <label class="form-check-label h5" for="date">Birthday</label>
-          <div class="input-group date" id="datepicker">
-            <input class="form-control" type="text" name="birthdate" id="birthdate" placeholder="MM/DD/YYYY" onchange="calculateAge(this.value)" required>
-            <span class="input-group-append">
-              <span class="input-group-text bg-light d-block">
-                <i class="fa fa-calendar"></i>
-              </span>
-            </span>
+          <div class="input-group date">
+            <input class="form-control" type="date" name="birthdate" id="birthdate" placeholder="MM/DD/YYYY"
+              onchange="calculateAge(this.value)" required>
           </div>
         </div>
         <div class="col-md-2">

diff --git a/templates/partials/form_common.html b/templates/partials/form_common.html
@@ -17,6 +17,8 @@
     </div>
     <div class="col">
       <label for="inputPhone" class="form-check-label h5">Phone</label>
-      <input type="phone" class="form-control" name="phone" id="inputPhone" pattern="^\d{3}-\d{3}-\d{4}$" oninvalid="setCustomValidity('Please enter a valid phone number.')" oninput="setCustomValidity('')" onchange="formatPhoneNumber(this.value)" required>
+      <input type="tel" class="form-control" name="phone" id="inputPhone" placeholder="123-456-7890"
+        pattern="^\d{3}-\d{3}-\d{4}$" oninvalid="setCustomValidity('Please enter a valid phone number.')"
+        oninput="setCustomValidity('')" onchange="formatPhoneNumber(this.value)" required>
     </div>
   </div>