feat(datepicker): format according to input type; position datepicker

Format dates and times according to the type of the input element; position the datepicker at the right by default and at the bottom for horizontal mass-inputs

frontend/src/utils/form/datepicker.js

@@ -2,7 +2,14 @@ import datetime from 'tail.datetime';
 import dateFormat from 'dateformat';
 import { Utility } from '../../core/utility';
 
-const FORM_DATE_FORMAT = 'yyyy-mm-dd"T"HH:MM:ss';
+// formats for displaying all dates and/or times
+const FORM_DATE_FORMAT_DATE = 'yyyy-mm-dd';
+const FORM_DATE_FORMAT_TIME = 'HH:MM:ss';
+const FORM_DATE_FORMAT = {
+  'date': FORM_DATE_FORMAT_DATE,
+  'time': FORM_DATE_FORMAT_TIME,
+  'datetime-local': `${FORM_DATE_FORMAT_DATE}"T"${FORM_DATE_FORMAT_TIME}`,
+};
 
 const DATEPICKER_UTIL_SELECTOR = 'input[type="date"], input[type="time"], input[type="datetime-local"]';
 
@@ -54,6 +61,7 @@ export class Datepicker {
 
   datepickerInstance;
   _element;
+  elementType;
 
   constructor(element) {
     if (!element) {
@@ -71,17 +79,23 @@ export class Datepicker {
 
     this._element = element;
 
+    // store the previously set type to select the input format
+    this.elementType = this._element.getAttribute('type');
+
     // get all relevant config options for this datepicker type
     const datepickerGlobalConfig = DATEPICKER_CONFIG['global'];
-    const datepickerConfig = DATEPICKER_CONFIG[this._element.getAttribute('type')];
+    const datepickerConfig = DATEPICKER_CONFIG[this.elementType];
+
+    // manually set the type attribute to text because datepicker handles displaying the date
+    this._element.setAttribute('type', 'text');
 
     // additional position config (optional data-datepicker-position attribute in html) that can specialize the global config
-    const datepickerPosition = this._element.dataSet.datepickerPosition;
+    const datepickerPosition = this._element.dataset.datepickerPosition;
     if (datepickerPosition) {
       datepickerGlobalConfig.position = datepickerPosition;
     }
 
-    if (!datepickerConfig) {
+    if (!datepickerConfig || !FORM_DATE_FORMAT[this.elementType]) {
       throw new Error('Datepicker utility called on unsupported element!');
     }
 
@@ -129,7 +143,7 @@ export class Datepicker {
    */
   formatElementValue() {
     if (!this.datepickerInstance.select || !this._element.value) return;
-    this._element.value = dateFormat(this.datepickerInstance.select, FORM_DATE_FORMAT);
+    this._element.value = dateFormat(this.datepickerInstance.select, FORM_DATE_FORMAT[this.elementType]);
   }
 
   /**

src/Handler/Exam/Form.hs

@@ -164,8 +164,8 @@ examOccurrenceForm prev = wFormToAForm $ do
       (eofNameRes, eofNameView) <- mpreq ciField ("" & addName (nudge "name")) (eofName <$> mPrev)
       (eofRoomRes, eofRoomView) <- mpreq textField ("" & addName (nudge "room")) (eofRoom <$> mPrev)
       (eofCapacityRes, eofCapacityView) <- mpreq (natFieldI MsgExamRoomCapacityNegative) ("" & addName (nudge "capacity")) (eofCapacity <$> mPrev)
-      (eofStartRes, eofStartView) <- mpreq utcTimeField ("" & addName (nudge "start")) (eofStart <$> mPrev)
+      (eofStartRes, eofStartView) <- mpreq utcTimeField ("" & addName (nudge "start") & addDatepickerPositionAttr DPBottom) (eofStart <$> mPrev)
-      (eofEndRes, eofEndView) <- mopt utcTimeField ("" & addName (nudge "end")) (eofEnd <$> mPrev)
+      (eofEndRes, eofEndView) <- mopt utcTimeField ("" & addName (nudge "end") & addDatepickerPositionAttr DPBottom) (eofEnd <$> mPrev)
       (eofDescRes, eofDescView) <- mopt htmlFieldSmall ("" & addName (nudge "description")) (eofDescription <$> mPrev)
 
       return ( ExamOccurrenceForm

src/Utils/Form.hs

@@ -107,6 +107,16 @@ addAttrs attr valus fs = fs { fsAttrs = insertAttr attr valu $ fsAttrs fs }
   where
     valu = T.intercalate " " valus
 
+data DatepickerPosition = DPLeft | DPRight | DPTop | DPBottom deriving (Eq,Ord,Enum,Bounded,Read,Show)
+
+instance Universe DatepickerPosition
+instance Finite DatepickerPosition
+
+nullaryPathPiece ''DatepickerPosition $ camelToPathPiece' 1
+
+addDatepickerPositionAttr :: DatepickerPosition -> FieldSettings site -> FieldSettings site
+addDatepickerPositionAttr = addAttr "data-datepicker-position" . toPathPiece
+
 addPlaceholder :: Text -> FieldSettings site -> FieldSettings site
 addPlaceholder placeholder fs = fs { fsAttrs = (placeholderAttr, placeholder) : filter ((/= placeholderAttr) . fst) (fsAttrs fs) }
   where