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