Playframework: Wie kann ich ein Eingabefeld in einem Formular initialisieren?

Question

Innerhalb einer Web-Formular Ich habe Eingabefelder wie diese:

<input type="datetime-local" id="dt" name="dt" value=@form("dt")><br /> 
<input type="text" id="f0" name="f0" size="12" list=lst> 

Ich Abbildung der Felder zu einer Klasse:

case class Data(dt: Date, f0: String...) 

Als ich senden Sie das Formular ich in der Lage bin, die Werte in eingefügt zu holen die Boxen. Allerdings wollte ich das erste Eingabefeld mit dem aktuellen Datum initialisieren. Ich versuchte, wie es dokumentiert wurde, indem ich folgendes aus der Hauptaktion zurückgab:

Ok(views.html.index(form.fill(new Data(new Date(), "")))) 

Aber es hat nicht geklappt.

Wie kann ich das erreichen?

Danke!

Answer 1

Definieren Sie zunächst eine benutzerdefinierte Formatter, die das Datum Muster durch die datetime-local input type mit Java benötigt hat date format pattern:

import play.api.data.format._ 

val dateTimeLocal: Formatter[Date] = Formats.dateFormat("yyyy-MM-dd'T'HH:mm") 

Dann definieren zu/von einem Formmapping und of verwenden.

val dataForm = Form(
    mapping(
    "dt" -> of(dateTimeLocal), 
    "f0" -> text 
)(Data.apply)(Data.unapply) 
) 

Jetzt können Sie ein Formular Helfer verwenden, um eine Anzeige <input type="datetime-local">:

@helper.inputText(dataForm("dt"), 'type -> "datetime-local") 

Dies erzeugt den folgenden HTML-Snippet, mit den richtigen Eingang type und Datum Mustern:

<input type="datetime-local" id="dt" name="dt" value="2017-11-16T08:19" /> 

Sie Ich erhalte eine Datum/Uhrzeitauswahl, wenn Sie diese in Chrome anzeigen, aber derzeit nicht in Browsern wie Firefox (Stand November 2017). Vielleicht möchten Sie this note auf MDN berücksichtigen: für datetime-local

Wegen der begrenzten Browser-Unterstützung, und die Variationen, wie die Eingänge arbeiten, kann es zur Zeit noch am besten sein, einen Rahmen oder eine Bibliothek zu verwenden, diese zu präsentieren, oder um eine benutzerdefinierte Eingabe zu verwenden. Eine weitere Option ist die Verwendung separater date und time Eingänge, von denen jeder weiter unterstützt wird als datetime-local.