Question

我正在阅读使用Scala的Play 2.0教程，我正在处理表单模板和字段构造器。

有没有一种很好的方法来添加日历字段，就像使用Primefaces（JSF）一样：

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

我可以想象一个帮助者：

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

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

Answer 1

在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库的原因，因为我没有你必须使用的默认前端库之前写的。

播放2.0小部件

1 个答案: