Play 2.0 widgets

Question

I'm going through the tutorials for Play 2.0 with Scala and I am working through the form templates and field constructors.

Is there a nice way to add a calender field, like you can with Primefaces (JSF):

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

I can imagine a helper like:

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

If it doesn't exist, is it in the pipeline?

Answer 1

There's no date/time picker tag in Play, reason is quite simple: as Play is a framework not a CMS there's no default front-end library, included Bootstrap tags de facto are placed in Play... accidentally :).

Last time when I needed such field I used combination of two Bootstrap's plugins:

• http://www.eyecon.ro/bootstrap-datepicker
• http://www.github.com/jdewit/bootstrap-timepicker

As I like them separately... Of course you can search for another solution combining date and time pickers ie: http://dl.dropbox.com/u/143355/datepicker/datepicker.html, it all depends on your needs and used FE solutions (if you don't use Bootstrap, you can for an example use jQuery UI samples).

Edit: helpers are nothing else than ready to use mini-templates built-in the Play, written with the Scala syntax for dynamic parts, which only job is to generate a HTML snippets . As I said, Play hasn't such large library as you showed as, however you can also write such things (ie. into tags package) also with dynamic params and then use it exactly the same way as they was a helpers.

Actually I'm using these mentioned Bootstrap's plugins that way:

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>

So in any view you can use it later with:

@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()

Of course that sample for Bootsrtap is prepared for my fields and requires additional methods in the Java classes, so it won't work without modifications. Generally I want to demonstrate you idea of tags.

Of course I agree with you that it would be perfect if there was similar API available for easy install for Play framework, but I'm not sure if Play's developers are planning it... You should ask them. Most probably this is a task for standalone module which targets some JS library cause as I wrote before there is no default front-end library which you have to use.