3

我正在阅读 Play 2.0 with Scala 的教程，并且正在研究表单模板和字段构造函数。

有没有一种添加日历字段的好方法，就像使用 Primefaces (JSF) 一样：

<p:calendar value="#{home.to}" pattern="dd.MM.yyyy" />

我可以想象一个像这样的助手：

@helper.calendar(form("to"))

如果它不存在，它是否在管道中？

4

1 回答 1

4

Play 中没有日期/时间选择器标签，原因很简单：因为 Play 是一个框架而不是 CMS，所以没有默认的前端库，包含的 Bootstrap 标签事实上被放置在 Play 中......意外:)。

上次当我需要这样的字段时，我使用了两个 Bootstrap 插件的组合：

因为我分别喜欢它们......当然，您可以搜索结合日期和时间选择器的另一种解决方案，即：http ://dl.dropbox.com/u/143355/datepicker/datepicker.html ，这完全取决于您的需求和使用 FE 解决方案（如果您不使用 Bootstrap，您可以使用jQuery UI示例）。

编辑： helpers除了准备使用内置在 Play 中的迷你模板之外，别无其他，使用 Scala 语法编写的动态部分，唯一的工作就是生成 HTML 片段。正如我所说，Play 没有您展示的那么大的库，但是您也可以tags使用动态参数编写这些东西（即放入包中），然后以与它们作为助手的方式完全相同的方式使用它。

实际上，我正在使用这些提到的 Bootstrap 插件：

app/views/tags/datePickerJs.scala.html

<!-- first line has to be empty, as that's place for defining views arguments - remove this comment...-->
<script type="text/javascript">
    function setToday(datePickerSetId) {
        var currentServerDate = "@DatepickerUtils.getCurrentDate()";
        var currentServerTime = "@DatepickerUtils.getCurrentTime()";
        $("#" + datePickerSetId + "Date").val(currentServerDate);
        $("#" + datePickerSetId + "Time").val(currentServerTime);
        $("#" + datePickerSetId + "DateContainer").data('date', currentServerDate);
        $("#" + datePickerSetId + "DateContainer").datepicker('update');
    }
</script>

app/views/tags/dateTimePicker.scala.html

@(label: String, prefix: String, dateString: String=null)

<label for="@{prefix}Date">@label </label>

<btn id="@{prefix}" class="datePickerSetNow btn pull-left" onclick="setToday('@{prefix}'); return false;">teraz</btn>
<div class="input-append date pull-left datePickerDateContainer" id="@{prefix}DateContainer" data-date='@DatepickerUtils.splitDateTime(dateString, 0, true)' da$
<input class="span2" size="16" type="text" value='@DatepickerUtils.splitDateTime(dateString, 0)' name="@{prefix}Date" id="@{prefix}Date">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>

<div class="input-append bootstrap-timepicker-component datePickerTimeContainer">
    <input type="text" class="@{prefix}Time input-small" name="@{prefix}Time" id="@{prefix}Time">
    <span class="add-on"><i class="icon-time"></i></span>
</div>

<script type="text/javascript">
    $('#@{prefix}DateContainer').datepicker({weekStart:1, language:'pl'});
    $('#@{prefix}Time').timepicker({
        minuteStep:5, template:'dropdown', showMeridian:false, defaultTime:'@DatepickerUtils.splitDateTime(dateString, 1)'
    });</script>

因此，在任何视图中，您都可以稍后将其用于：

@tags.dateTimePicker(
   "Event's start",
   "eventStartDate",
   myForm("eventStart").value
)

@tags.dateTimePicker(
   "Event's end",
   "eventEndDate",
   myForm("eventEnd").value
)

<!-- once per view at the end -->
@tags.datePickerJs()

当然，Bootsrtap 的示例是为我的字段准备的，并且需要 Java 类中的其他方法，因此如果不进行修改，它将无法工作。一般来说，我想向您展示tags.

当然，我同意你的观点，如果有类似的 API 可用于轻松安装 Play 框架，那将是完美的，但我不确定 Play 的开发人员是否正在计划它......你应该问他们。很可能这是针对某些 JS 库的独立模块的任务，正如我在没有您必须使用的默认前端库之前所写的那样。

于 2012-09-23T10:41:42.773 回答