游戏框架:如何初始化表单中的输入框

Question

在Web表单中，我有如下输入框：

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

我正在将字段映射到一个类：

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

当我提交表格时，我能够获取插入框中的值。但是，我想用当前日期初始化第一个输入框。我尝试像记录的那样，从主操作返回以下内容：

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

但它没有成功。

我怎样才能做到这一点？

谢谢！

Answer 1

首先定义一个自定义Formatter，该具有 Java 的日期格式模式的日期时间本地输入类型所需的日期模式：

import play.api.data.format._
val dateTimeLocal: Formatter[Date] = Formats.dateFormat("yyyy-MM-dd'T'HH:mm")

然后使用 mapping 和 of 定义到/从Form定义。

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

现在，您可以使用表单帮助程序来显示<input type="datetime-local">：

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

这将生成以下 HTML 代码段，其中包含正确的输入type和日期模式：

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

当您在 Chrome 中查看此内容时，您将获得一个日期/时间选择器，但目前在 Firefox 等浏览器中没有(截至 2017 年 11 月(。你可能希望考虑在MDN上的这个说明：

由于浏览器对datetime-local的支持有限，并且输入的工作方式各不相同，因此目前最好使用框架或库来呈现这些内容，或者使用您自己的自定义输入。另一种选择是使用单独的date和time输入，每个输入都比datetime-local更广泛地支持。