(888) 685-3101 ext. 2

This is a simple tutorial to create an input textbox with the alloy ui calendar datepicker.

Simple DatePicker:

1. Include the below taglib directive to your jsp

<%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>

2. Wrap your date field input box around a div

<h2>Start Date:<h2>
<div class="aui-datepicker aui-helper-clearfix" id="#<portlet:namespace />startDatePicker">
<input type="text" name="startDate" id="<portlet:namespace />startDate" size="30" />
</div>

3. Add the aui script to your jsp

<aui:script>
AUI().use('aui-datepicker', function(A) {
var simpleDatepicker1 = new A.DatePicker({
trigger: '#<portlet:namespace />startDate',
}).render('##<portlet:namespace />startDatePicker');
});
</aui:script>

For more configuration options with the datepicker check here

4. In your portlet render or action method add the below code to get the date from the request parameter:

DateFormat df = new SimpleDateFormat("MM/dd/yyyy");Date startDate = df.parse(actionRequest.getParameter("startDate"));

5. Build and deploy

DatePickerSelect:

1. Add the below html code.


<div id="staticDatePicker" class="aui-datepicker-example aui-helper-clearfix">
<div class="aui-datepicker-example aui-helper-clearfix" id="staticDatePicker">
<h2>Start Date: from HTML Markup</h2>
<div class="aui-datepicker aui-datepicker-display aui-helper-clearfix" id="datePickerBB">
<div class="aui-datepicker-content" id="srcNode">
<div class="aui-datepicker-select-
wrapper">
<select id="yearNode" class="custom-field aui-datepicker-year">
<option value="2012">2012</option>
</select>
<select id="monthNode" class="custom-field aui-datepicker-month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5" selected>June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select id="dayNode" class="custom-field aui-datepicker-day">
<option value="9">9</option>
</select>
</div>
<div class="aui-datepicker-button-wrapper">
<button type="button" id="buttonTest" class="aui-buttonitem-content aui-widget aui-component aui-buttonitem aui-state-default aui-buttonitem-icon-only">
<span class="aui-buttonitem-icon aui-icon aui-icon-calendar"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

2. Add the aui script to your jsp

<aui:script>
AUI().use('aui-datepicker', function(A) {

var datepicker2 = new A.DatePickerSelect({
srcNode: '#srcNode',
contentBox: '#srcNode',
boundingBox: '#datePickerBB',

appendOrder: [ 'y', 'm', 'd' ],
calendar: {
dates: [ '10/10/2010' ],
dateFormat: '%m/%d/%y'
},

// dayNode: '#dayNode',
// monthNode: '#monthNode',
// yearNode: '#yearNode',

// dayNodeName: 'dayNode',
// monthNodeName: 'monthNode',
// yearNodeName: 'yearNode',

nullableDay: true,
nullableMonth: true,
nullableYear: true,

// populateMonth: false,
// populateDay: false,
// populateYear: false,
yearRange: [ 1980, (new Date).getFullYear() ]
}).render();

});
</aui:script>

3. Build and deploy

Share This