Pickadate format based on js format

NEMO/apps/kiosk/templates/kiosk/tool_reservation.html

@@ -56,9 +56,9 @@ <h4>When would you like to reserve the {{ tool }}?</h4>
 	{% for item in tool_reservation_times %}
 	unavailable_times.push([{{ item.start|date:"U" }},{{ item.end|date:"U" }}]);
 	{% endfor %}
-	let date_picker = $('#date').pickadate({format: "dddd, mmmm d", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, onSet: refresh_times});
-	let start_time_picker = $('#start').pickatime({interval: 15, formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
-	let end_time_picker = $('#end').pickatime({interval: 15, formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
+	let date_picker = $('#date').pickadate({format: "{{ pick_date_format }}", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, onSet: refresh_times});
+	let start_time_picker = $('#start').pickatime({interval: 15, format: "{{ pick_time_format }}", formatSubmit: "HH:i", hiddenName: true, formatLabel: format_label});
+	let end_time_picker = $('#end').pickatime({interval: 15, format: "{{ pick_time_format }}", formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
 	// set initial date
 	if ('{{ date|default_if_none:'' }}') {
 		date_picker.pickadate('picker').set('select', '{{ date }}', {format: 'yyyy-mm-dd'})
@@ -77,11 +77,11 @@ <h4>When would you like to reserve the {{ tool }}?</h4>
                 let start = times[0];
                 let end = times[1];
                 if (date_time_selected >= start && date_time_selected < end) {
-                    return '<sp !an>h:i A</sp !an> <sm !all> !alre!ad!y re!serve!d</sm !all>';
+                    return '<sp !an>{{ pick_time_format }}</sp !an> <sm !all> !alre!ad!y re!serve!d</sm !all>';
                 }
             }
 		}
-		return "h:i A";
+		return '{{ pick_time_format }}';
 	}
 	revert(120)
 </script>

NEMO/context_processors.py

@@ -1,5 +1,11 @@
 from NEMO.models import Area, Notification, PhysicalAccessLevel, Tool, User
-from NEMO.utilities import date_input_js_format, datetime_input_js_format, time_input_js_format
+from NEMO.utilities import (
+    date_input_js_format,
+    datetime_input_js_format,
+    time_input_js_format,
+    date_pick_format,
+    time_pick_format,
+)
 from NEMO.views.customization import CustomizationBase
 from NEMO.views.notifications import get_notification_counts
 
@@ -84,6 +90,8 @@ def base_context(request):
         "time_input_js_format": time_input_js_format,
         "date_input_js_format": date_input_js_format,
         "datetime_input_js_format": datetime_input_js_format,
+        "date_pick_format": date_pick_format,
+        "time_pick_format": time_pick_format,
         "no_header": request.session.get("no_header", False),
         "safety_menu_item": customization_values.get("safety_main_menu") == "enabled",
         "calendar_page_title": customization_values.get("calendar_page_title"),

NEMO/templates/mobile/new_reservation.html

@@ -69,9 +69,9 @@ <h4>When would you like to reserve the {{ item }}?</h4>
 		{% for times in item_reservation_times %}
 		unavailable_times.push([{{ times.start|date:"U" }},{{ times.end|date:"U" }}]);
 		{% endfor %}
-		let date_picker = $('#date').pickadate({format: "dddd, mmmm d", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, onSet: refresh_times});
-		let start_time_picker = $('#start').pickatime({interval: 15, formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
-		let end_time_picker = $('#end').pickatime({interval: 15, formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
+		let date_picker = $('#date').pickadate({format: "{{ pick_date_format }}", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, onSet: refresh_times});
+		let start_time_picker = $('#start').pickatime({interval: 15,  format: "{{ pick_time_format }}", formatSubmit: "H:i", hiddenName: true, formatLabel: format_label });
+		let end_time_picker = $('#end').pickatime({interval: 15, format: "{{ pick_time_format }}", formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
 		// set initial date
 		if ('{{ date|default_if_none:'' }}')
 		{
@@ -93,11 +93,11 @@ <h4>When would you like to reserve the {{ item }}?</h4>
                     let start = times[0];
                     let end = times[1];
                     if (date_time_selected >= start && date_time_selected < end) {
-                        return '<sp !an>h:i A</sp !an> <sm !all> !alre!ad!y re!serve!d</sm !all>';
+                        return '<sp !an>{{ pick_time_format }}</sp !an> <sm !all> !alre!ad!y re!serve!d</sm !all>';
                     }
                 }
 			}
-		    return "h:i A";
+		    return "{{ pick_time_format }}";
         }
 
     </script>

NEMO/utilities.py

@@ -66,6 +66,24 @@
     "%%": "%",
 }
 
+py_to_pick_date_formats = {
+    "%A": "dddd",
+    "%a": "ddd",
+    "%B": "mmmm",
+    "%b": "mmm",
+    "%d": "dd",
+    "%H": "HH",
+    "%I": "hh",
+    "%M": "i",
+    "%m": "mm",
+    "%p": "A",
+    "%X": "HH:i",
+    "%x": "mm/dd/yyyy",
+    "%Y": "yyyy",
+    "%y": "yy",
+    "%%": "%",
+}
+
 
 # Convert a python format string to javascript format string
 def convert_py_format_to_js(string_format: str) -> str:
@@ -74,13 +92,43 @@ def convert_py_format_to_js(string_format: str) -> str:
     return string_format
 
 
+def convert_py_to_pick_time(string_format: str) -> str:
+    try:
+        return settings.PICK_TIME_FORMAT
+    except AttributeError:
+        string_format = (
+            string_format.replace("%w", "")
+            .replace("%s", "")
+            .replace("%f", "")
+            .replace("%z", "")
+            .replace("%Z", "")
+            .replace("%j", "")
+            .replace(":%S", "")
+            .replace("%S", "")
+            .replace("%U", "")
+            .replace("%W", "")
+            .replace("%c", "")
+            .replace("%U", "")
+            .replace("%W", "")
+            .replace("%G", "")
+            .replace("%U", "")
+            .replace("%u", "")
+            .replace("%V", "")
+            .replace("%:z", "")
+        )
+        for py, pick in py_to_pick_date_formats.items():
+            string_format = pick.join(string_format.split(py))
+        return string_format
+
+
 time_input_format = get_format("TIME_INPUT_FORMATS")[0]
 date_input_format = get_format("DATE_INPUT_FORMATS")[0]
 datetime_input_format = get_format("DATETIME_INPUT_FORMATS")[0]
 time_input_js_format = convert_py_format_to_js(time_input_format)
 date_input_js_format = convert_py_format_to_js(date_input_format)
 datetime_input_js_format = convert_py_format_to_js(datetime_input_format)
-
+date_pick_format = convert_py_to_pick_time(date_input_format)
+time_pick_format = convert_py_to_pick_time(time_input_format)
 
 supported_embedded_video_extensions = [".mp4", ".ogv", ".webm", ".3gp"]
 supported_embedded_pdf_extensions = [".pdf"]

resources/settings.py

@@ -78,6 +78,15 @@
 DATE_INPUT_FORMATS = ["%m/%d/%Y", *global_settings.DATE_INPUT_FORMATS]
 TIME_INPUT_FORMATS = ["%I:%M:%S %p", *global_settings.TIME_INPUT_FORMATS]
 
+# -------------------- Pick date and time formats --------------------
+# Those formats are optional in most cases and only used on kiosk or mobile views, when picking up date/time separately.
+# If not defined, a conversion from DATE_INPUT_FORMATS and TIME_INPUT_FORMATS will be attempted.
+# See allowed date formats at https://amsul.ca/pickadate.js/date/#formatting-rules
+# See allowed time formats at https://amsul.ca/pickadate.js/time/#formatting-rules
+# PICK_DATE_FORMAT = "mm/dd/yyyy"
+# PICK_TIME_FORMAT = "HH:i A"
+
+
 # -------------------- Internationalization and localization --------------------
 # A boolean that specifies whether Django’s translation system should be enabled.
 # This provides an easy way to turn it off, for performance.