#{extends 'jqueryui/layout.html'/} #{set title:'Date picker'/} #{set 'moreScripts'} #{/set}
Use a date picker to select formatted date values for a text input field. Although there is no server-side action for the date picker widget, it does require integration with the Play configuration.
Date:
Localisation: #{list play.configuration['application.langs'].split(','), as:'l'} #{if l == lang}${l}#{/if} #{else}${l}#{/else} #{/list}
The widget is based on an HTML input
element, with a class name that we will use later to identify it.
<input class="date">
The date format is specified in the body
tag’s data-dateformat
attribute and converted from Java to jQuery UI format by the JavaScript.
<body data-dateformat="${play.configuration['date.format']}">
The datepicker.js
JavaScript converts date formats and applies the jQuery UI date picker plug-in to HTML input
elements with the date
class.
#{includeVerbatim '/public/javascripts/datepicker.js'/}
The date picker also provides language localisations, each in a separate JavaScript file. Our JavaScript then selects a localisation according to the value of ${lang}
.
The only server-side code is a controller action that sets the current Play language. This value is used in the view template, to set the html
tag’s lang
attribute,
to make the current language setting available to client-side JavaScript.
#{includeVerbatim 'app/controllers/jqueryui/DatePicker.java'/}