Question

在网络表单中，我有这样的输入框：

<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

首先使用Java datetime-local input type定义具有[{3}}所需日期模式的自定义Formatter：

import play.api.data.format._

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

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

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上考虑date format pattern：

由于datetime-local对浏览器的支持有限，以及输入的工作方式有所不同，目前最好使用框架或库来展示这些内容，或者使用自己的自定义输入。另一个选项是使用单独的date和time输入，每个输入都比datetime-local得到更广泛的支持。