Play 2.0 框架 - 自定义表单域答案

【问题标题】：Play 2.0 Framework - Custom Form FieldPlay 2.0 框架 - 自定义表单域
【发布时间】：2012-11-22 11:55:42
【问题描述】：

提前感谢您的时间和帮助！

我正在尝试在 Play 2.0.4 中构建一个自定义表单字段，该字段使用找到的 twitter bootstrap datepicker here。

基本上，我正在尝试创建一个输出以下内容的自定义字段构造函数：

<div class="input-append date error" id="expires_field" data-date="" data-date-format="mm/dd/yyyy">
    <label for="expires_field">Expiration Date</label>
    <div class="input">
        <input class="span2" size="16" type="text" name="expires" id="expires" value="mm/dd/yyyy">
        <span class="add-on"><i class="icon-th"></i></span>
        <span class="help-inline"></span>
    </div>
</div>

但是，尽管在互联网上浏览了很多 - 我一直无法在 Play 2.0 中创建自定义表单字段，我仍然可以在其中验证和显示错误。

我认为，我对文件需要在应用程序结构中的什么位置感到有些困惑。

任何帮助将不胜感激！

像素世界

【问题讨论】：

参见github.com/playframework/Play20/wiki/ScalaFormHelpers 和stackoverflow.com/q/10392302/130224 编写自己的字段构造函数
reprogrammer - 感谢您的回复，但是我已经查看了该文档，但我仍然无法理解它的工作原理。

标签： java scala playframework playframework-2.0 custom-fields

【解决方案1】：

我也一直在努力解决这个问题，这就是我想出的：

@(field: play.api.data.Field, args: (Symbol,Any)*)(implicit lang: play.api.i18n.Lang)

@import play.api.i18n._
@import views.html.helper._

@elements = @{ new FieldElements(field.id, field, null, args.toMap, lang) }

<div class="control-group">
  <label class="control-label" for="@field.name">@elements.args.get('_label)</label>
  <div class="controls">
    <div class="input-append date" id="@field.id-picker" data-date="@field.value" data-date-format="@elements.args.get('format).getOrElse("mm/dd/yyyy")">
      <input type="text" name="@field.name" id="@field.id">
      <span class="add-on"><i class="icon-calendar"></i></span>
      <span class="help-inline">@elements.errors(elements.lang).mkString(", ")</span>
      <span class="help-block">@elements.infos(elements.lang).mkString(", ")</span> 
    </div>
  </div>
</div>

将其保存在文件 calendar.scala.html 中并像这样使用它：

@views.html.forms.calendar(
  myform("end"),
  '_showConstraints -> false,
  '_label -> Messages("label.end.date"),
  'format -> "dd/mm/yyyy"
)

然后在你的 JS 中：

$('#end-picker').datepicker({
  weekStart: 1
}).on('changeDate', function(ev){
  $('#end-picker').datepicker('hide');
});

id的名字是用field.name + "-picker"生成的

另外，您可以使用 inputText：

@inputText(
  myform("start"),
  '_showConstraints -> false,
  '_label -> Messages("label.start.date"),
  'class -> "date-picker",
  Symbol("data-date-format") -> "mm/dd/yyyy"
)

希望对你有帮助

【讨论】：

【解决方案2】：

我解决这个问题的最简单方法是在我的 bean 级别定义一个注释 (play.data.format.Formats)：

@Formats.DateTime(pattern = "mm/dd/yyyy") 公开日期开始；

该框架负责在 HTML 中呈现。

【讨论】：