Validierung des Datum-Formats beim Formular-Feldtyp "Kalender"

Hallo zusammen,

Ich teste gerade mit dem Standrad-Formular-Feldtyp "Kalender" herum.

Bei diesem Feldtyp ist es ja so, dass ein bestimmtes Datumsformat definiert werden kann. Einmal definiert muss dieses Datumsformat eingehalten werden, ansonsten werden unstimmige Daten bei submit abgespeichert.

Beispiel:

Dieses Formularfeld wurde mit folgender Definition in der XML erstellt

<field name="birthday" class="inputbox" format="%d.%m.%Y" timeformat="24" filter="user_utc" translateformat="false" showtime="false" singleheader="false" todaybutton="false" weeknumbers="false" filltable="false" type="calendar" label="COM_ATTLIST_BIRTHDAY" description="COM_ATTLIST_FORM_BIRTHDAY_DESC" hint="DD.MM.YYYY"/>

Wenn der Kalender-Button benutzt wird, um das Datum einzugeben klappt alles prima. Wird das Datum manuell im gewünschten Format z.B 01.10.1998 eingegeben entsteht auch kein Problem. Wenn jedoch das Datum manuell in einem anderen als dem vorgegebenen Format eingegeben wird z.B 1998-10-01, so wird das Datum beim absenden des Formulars ohne Rückmeldung in 21.03.2007 (21.März 2007) umgewandelt und auch so gespeichert.

Gibt es eine Möglichkeit eine Validierung zu diesem Feldtyp hinzuzufügen, damit falsche Datumsformate erkannt werden?

Am liebsten hätte ich, dass das Formular nicht abgesendet und das Feld rot markiert wird, wenn ein falsches Datumsformat im input-Feld erkannt wird.

Wäre schön, wenn es einen Joomla-Way-Of-Doing-It gäbe und ich diese Validierung nicht selber von Hand coden müsste...

Lg Manuel

Nach vielem heumprobieren habe ich mich nun entschieden, statt mit

JForm::renderField('birthday')

das Formularfeld mit einer eigenen Methode zu generieren. So ist es mir möglich für das Datumsfeld das offizielle HTML5 <input type="date"> zu verwenden. Dabei wird der date picker vom Browser bereitgestellt und ebenso vom Browser sichergestellt, dass das Datum im richtigen Format vorliegt.
Die date picker von Desktop-Browsern sind zwar etwas weniger "schön" als der date picker vom Joomla-Formfeld "calendar", auf dem Moblie sind diejenigen vom Browser jedoch viel eleganter und intuitiver zu bedienen.

Mit der eigenen Methode ist es mir also möglich ein wie folgt definiertes Formularfeld vom Typ Kalender als offizielles <input type="date"> Element auszugeben.

<field name="birthday" class="inputbox" format="%Y-%m-%d" type="calendar" label="COM_ATTLIST_BIRTHDAY" description="COM_ATTLIST_FORM_BIRTHDAY_DESC" hint="DD.MM.YYYY" maxyear="-5" required="true" autocomplete="false"/>

Folgend die Methode (definiert in der view.html.php der component-view):

/**
* Renders a custom field type calendar
*
* @param   string  $name  Name of the calendar filed to render
*
* @return  string  html-string of a calendar field
*
*/
public function renderCalendar($name)
{
   $field = $this->form->getField($name);

   if ($field)
      {
         if ($field->getAttribute('format') == '%Y-%m-%d')
         {

            $autocomplete = 'off';
            if ($field->getAttribute('autocomplete') == 'true')
            {
               $autocomplete = 'on';
            }

            $required = '';
            $label = Text::_($field->getAttribute('label'));
            if ($field->getAttribute('required') == 'true')
            {
               $required = ' required';
               $label = $label.' *';
            }

            $class = '';
            if ($field->getAttribute('class'))
            {
                $class = $field->getAttribute('class');
            }

            $maxyear = '';
            if ($field->getAttribute('maxyear'))
            {
                $date = strtotime($field->getAttribute('maxyear').' year', time());

                $maxyear = HtmlHelper::date($date, 'Y-m-d');
            }

            $minyear = '';
            if ($field->getAttribute('minyear'))
            {
                $date = strtotime($field->getAttribute('minyear').' year', time());

                $minyear = HtmlHelper::date($date, 'Y-m-d');
            }

            $html='<div class="control-group"><div class="control-label">';
            $html.='<label id="jform_'.$name.'-lbl" class="hasPopover'.$required.'" for="jform_'.$name.'" title="" data-content="'.Text::_($field->getAttribute('description')).'" data-original-title="'.Text::_($field->getAttribute('label')).'">'.$label.'</label>';
            $html.='</div><div class="controls">';
            $html.='<input id="jform_'.$name.'" class="'.$class.' '.$required.'" type="date" name="jform['.$name.']" value="" max="'.$maxyear.'" min="'.$minyear.'" data-alt-value="" autocomplete="'.$autocomplete.'" required="'.$required.'" aria-required="'.$required.'">';
            $html.='</div></div>';

            return $html;
        }
        else
        {
            return '<p>Form field "'.$name.'": Wrong format pattern in the XML-Definition. It has to be %Y-%m-%d!</p>';
        }            
    }
    else
    {
        return '<p>Form field "'.$name.'": Field not found</p>';
    }
}

Bis jetzt hat sich diese Variante in den Tests gut bewährt. Einziger Nachteil: Die date picker des Elemets <input type="date"> lassen sich leider mit CSS nicht anpassen...

Falls jemand noch eine andere gute Idee hat dieses Problem zu lösen, bin ich offen für Anregungen.

Lg

Manuel

Zitat von deGobbis

Vielleicht kannst du dazu einen Issue auf Github aufmachen? https://github.com/joomla/joomla-cms/issues

Für die serverseitige Validierung hätte ich schon eine Lösung, weiss nur noch nicht wie man das Testen soll (für den PR).

Was sind die Gründe von Joomla ein <input type="text"> Element für das Formularfeld "calendar" zu verwenden?
Wäre es stattdessen nicht sinnvoller ein PR einzureichen, um das <input type="text"> Element mit einem <input type="date"> Element zu ersetzen für das Kalender-Formularfeld?

Oder weil damit keine Zeit auswählbar ist?
Mit dem Element <input type="datetime-local"> wäre auch die Zeit wählbar, jedoch ist dieses Element noch nicht von allen Browsern unterstützt...

Mal schauen, was die Zeit bringt.