#{extends 'jqueryui/layout.html'/} #{set title:'Date picker'/} #{set 'moreScripts'} #{/set}

Date picker - server-side configuration

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.

Demo

Date:

Localisation: #{list play.configuration['application.langs'].split(','), as:'l'} #{if l == lang}${l}#{/if} #{else}${l}#{/else} #{/list}

Client

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}.

Server

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'/}