This tag is used to create calendar component in the page. It can be created in different styles. If rendereAsPopup attribute is set to true then it creates an input box along with a button which when clicked renders a popup calendar. We can select any date and it is displayed in the input box in our required format. A help text can also be given in the input box to help the user to input the date in the specified format. The current date can be displayed in the popup window in our required format with some string. Manny attributes are there to use CSS in different parts of the component. In the following example, we can see how the component can be used in our page.
Code Description :
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<f:view>
<t:document>
<t:documentHead>
<meta http-equiv="Content-Type" content="text/html; Charest=iso-8859-1">
<title>t:inputCalendar example</title>
<style type="text/css">
<!--
.yearRowStyle {
background-color: #A8D1E8;
color: green;
text-align: center;
font-weight: bold;
font-style:italic;
}
.weekRowStyle {
background-color: #D6EBFC;
}
.selectedDayCellStyle {
background-color: #ECD5D2;
}
-->
</style>
</t:documentHead>
<t:documentBody ><center>
<h:form>
<t:inputCalendar monthYearRowClass="yearRowStyle" weekRowClass="weekRowStyle"
currentDayCellClass="selectedDayCellStyle" value="#{Calendar.selectedDate1}"/>
<t:htmlTag value="pre">------------------------</t:htmlTag>
<t:inputCalendar id="secondOne" value="#{Calendar.selectedDate2}"
renderAsPopup="true"
popupDateFormat="MM/dd/yyyy"
popupTodayDateFormat="dd-MMM-yyyy"
popupWeekString="Week"
popupTodayString="The date today is :"
renderPopupButtonAsImage="true"
popupButtonImageUrl="images/cal.gif"
helpText="MM/DD/YYYY"
forceId="true"/>
</h:form></center>
</t:documentBody>
</t:document>
</f:view>
Rendered Output :
Html Source Code :
<html>
<head>
<link rel="stylesheet" href="/tomahawk_tags/faces/myFacesExtensionResource/
org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/11859544/
calendar.HtmlCalendarRenderer/WH/theme.css" type="text/css" />
<link rel="stylesheet" href="/tomahawk_tags/faces/myFacesExtensionResource/
org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/11859544/
calendar.HtmlCalendarRenderer/DB/theme.css" type="text/css" />
<script type="text/javascript" src="/tomahawk_tags/faces/
myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.
MyFacesResourceLoader/11859544/prototype.PrototypeResourceLoader/
prototype.js"><!--
//--></script>
<script type="text/javascript" src="/tomahawk_tags/faces/
myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.
MyFacesResourceLoader/11859544/calendar.HtmlCalendarRenderer/date.js">
<!--
//--></script>
<script type="text/javascript" src="/tomahawk_tags/faces/
myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.
MyFacesResourceLoader/11859544/calendar.HtmlCalendarRenderer/
popcalendar.js"><!--
//--></script>
<script type="text/javascript" src="/tomahawk_tags/faces/
myFacesExtensionResource/org.apache.myfaces.renderkit.html.
util.MyFacesResourceLoader/11859544/inputTextHelp.HtmlTextHelpRenderer/
inputTextHelp.js"><!--
//--></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>t:inputCalendar example</title>
<style type="text/css">
<!--
.yearRowStyle {
background-color: #A8D1E8;
color: green;
text-align: center;
font-weight: bold;
font-style:italic;
}
.weekRowStyle {
background-color: #D6EBFC;
}
.selectedDayCellStyle {
background-color: #ECD5D2;
}
-->
</style>
</head>
<body><center>
<form id="_idJsp3" name="_idJsp3" method="post" action="/tomahawk_tags/
pages/inputCalendar.jsf" enctype="application/x-www-form-urlencoded">
<table>
<tr class="yearRowStyle"><td><script type="text/javascript"><!--
function oamSetHiddenInput(formname, name, value)
{
var form = document.forms[formname];
if(typeof form.elements[name]=='undefined')
{
var newInput = document.createElement('input');
newInput.setAttribute('type','hidden');
newInput.setAttribute('name',name);
newInput.setAttribute('value',value);
form.appendChild(newInput);
}
else
{
form.elements[name].value=value;
}
}
function oamClearHiddenInput(formname, name, value)
{
var form = document.forms[formname];
if(typeof form.elements[name]!='undefined')
{
form.elements[name].value=null;
}
}
function oamSubmitForm(formName, linkId, target, params)
{
var clearFn = 'clearFormHiddenParams_'+formName.replace(/-/g, '\$:').
replace(/:/g,'_');
if(typeof eval('window.'+clearFn)!='undefined')
{
eval('window.'+clearFn+'(formName)');
}
var oldTarget = '';
if((typeof target!='undefined') && target != null)
{
oldTarget=document.forms[formName].target;
document.forms[formName].target=target;
}
if((typeof params!='undefined') && params != null)
{
for(var i=0; i<params.length; i++)
{
oamSetHiddenInput(formName,params[i][0], params[i][1]);
}
}
oamSetHiddenInput(formName,formName +':'+'_idcl',linkId);
if(document.forms[formName].onsubmit)
{
var result=document.forms[formName].onsubmit();
if((typeof result=='undefined')||result)
{
document.forms[formName].submit();
}
}
else
{
document.forms[formName].submit();
}
if(oldTarget==null) oldTarget='';
document.forms[formName].target=oldTarget;
if((typeof params!='undefined') && params != null)
{
for(var i=0; i<params.length; i++)
{
oamClearHiddenInput(formName,params[i][0], params[i][1]);
}
}
oamClearHiddenInput(formName,formName +':'+'_idcl',linkId);
return false;
}
//--></script><a href="#" onclick="return oamSubmitForm('_idJsp3','_
idJsp3:_idJsp4_1183289913468_link',null,[['_idJsp3:_idJsp4','7/1/07']]);"
id="_idJsp3:_idJsp4_1183289913468_link"><</a></td><td colspan="5">
August 2007</td><td><a href="#" onclick="return oamSubmitForm('_idJsp3',
'_idJsp3:_idJsp4_1188646713468_link',null,[['_idJsp3:_idJsp4','9/1/07']]);"
id="_idJsp3:_idJsp4_1188646713468_link">></a></td></tr>
<tr class="weekRowStyle"><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td>
<td>Thu</td><td>Fri</td><td>Sat</td></tr>
<tr><td></td><td></td><td></td><td class="selectedDayCellStyle">
<a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_
1185968313468_link',null,[['_idJsp3:_idJsp4','8/1/07']]);"
id="_idJsp3:_idJsp4_1185968313468_link">1</a></td><td>
<a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_
1186054713468_link',null,[['_idJsp3:_idJsp4','8/2/07']]);"
id="_idJsp3:_idJsp4_1186054713468_link">2</a></td><td><a href="#"
onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_1186141113468_
link',null,[['_idJsp3:_idJsp4','8/3/07']]);" id="_idJsp3:_idJsp4_
1186141113468_link">3</a></td><td><a href="#" onclick="return
oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_1186227513468_link',null,
[['_idJsp3:_idJsp4','8/4/07']]);" id="_idJsp3:_idJsp4_1186227513468_link">
4</a></td></tr>
<tr><td><a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_
idJsp4_1186313913468_link',null,[['_idJsp3:_idJsp4','8/5/07']]);"
id="_idJsp3:_idJsp4_1186313913468_link">5</a></td><td><a href="#"
onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_1186400313468_
link',null,[['_idJsp3:_idJsp4','8/6/07']]);" id="_idJsp3:_idJsp4_
1186400313468_link">6</a></td><td><a href="#" onclick="return
oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_1186486713468_link',null,
[['_idJsp3:_idJsp4','8/7/07']]);" id="_idJsp3:_idJsp4_1186486713468_link">
7</a></td><td><a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3
:_idJsp4_1186573113468_link',null,[['_idJsp3:_idJsp4','8/8/07']]);"
id="_idJsp3:_idJsp4_1186573113468_link">8</a></td><td><a href="#"
onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_
1186659513468_link',null,[['_idJsp3:_idJsp4','8/9/07']]);"
id="_idJsp3:_idJsp4_1186659513468_link">9</a></td><td>
<a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_
1186745913468_link',null,[['_idJsp3:_idJsp4','8/10/07']]);"
id="_idJsp3:_idJsp4_1186745913468_link">10</a></td><td>
<a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_
idJsp4_1186832313468_link',null,[['_idJsp3:_idJsp4','8/11/07']]);"
id="_idJsp3:_idJsp4_1186832313468_link">11</a></td></tr>
<tr><td><a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_
idJsp4_1186918713468_link',null,[['_idJsp3:_idJsp4','8/12/07']]);"
id="_idJsp3:_idJsp4_1186918713468_link">12</a></td><td><a href="#"
onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_1187005113468
_link',null,[['_idJsp3:_idJsp4','8/13/07']]);" id="_idJsp3:_idJsp4_
1187005113468_link">13</a></td><td><a href="#" onclick="return
oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_1187091513468_link',null,
[['_idJsp3:_idJsp4','8/14/07']]);" id="_idJsp3:_idJsp4_1187091513468_
link">14</a></td><td><a href="#" onclick="return oamSubmitForm('_
idJsp3','_idJsp3:_idJsp4_1187177913468_link',null,[['_idJsp3:_idJsp4',
'8/15/07']]);" id="_idJsp3:_idJsp4_1187177913468_link">15</a>
</td><td><a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_
idJsp4_1187264313468_link',null,[['_idJsp3:_idJsp4','8/16/07']]);"
id="_idJsp3:_idJsp4_1187264313468_link">16</a></td><td><a href="#"
onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_1187350713468_
link',null,[['_idJsp3:_idJsp4','8/17/07']]);" id="_idJsp3:_idJsp4_
1187350713468_link">17</a></td><td><a href="#" onclick="return
oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_1187437113468_link',null,
[['_idJsp3:_idJsp4','8/18/07']]);" id="_idJsp3:_idJsp4_1187437113468_
link">18</a></td></tr>
<tr><td><a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_
idJsp4_1187523513468_link',null,[['_idJsp3:_idJsp4','8/19/07']]);"
id="_idJsp3:_idJsp4_1187523513468_link">19</a></td><td><a href="#"
onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_1187609913468_
link',null,[['_idJsp3:_idJsp4','8/20/07']]);" id="_idJsp3:_idJsp4_
1187609913468_link">20</a></td><td><a href="#" onclick="return oamSubmitForm
('_idJsp3','_idJsp3:_idJsp4_1187696313468_link',null,[['_idJsp3:_idJsp4',
'8/21/07']]);" id="_idJsp3:_idJsp4_1187696313468_link">21</a></td><td>
<a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_
1187782713468_link',null,[['_idJsp3:_idJsp4','8/22/07']]);" id="_
idJsp3:_idJsp4_1187782713468_link">22</a></td><td><a href="#"
onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_1187869113468_
link',null,[['_idJsp3:_idJsp4','8/23/07']]);" id="_idJsp3:_idJsp4_
1187869113468_link">23</a></td><td><a href="#" onclick="return
oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_1187955513468_link',null,
[['_idJsp3:_idJsp4','8/24/07']]);" id="_idJsp3:_idJsp4_1187955513468_link">
24</a></td><td><a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:
_idJsp4_1188041913468_link',null,[['_idJsp3:_idJsp4','8/25/07']]);"
id="_idJsp3:_idJsp4_1188041913468_link">25</a></td></tr>
<tr><td><a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_
1188128313468_link',null,[['_idJsp3:_idJsp4','8/26/07']]);"
id="_idJsp3:_idJsp4_1188128313468_link">26</a></td><td>
<a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_
1188214713468_link',null,[['_idJsp3:_idJsp4','8/27/07']]);"
id="_idJsp3:_idJsp4_1188214713468_link">27</a></td><td>
<a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_
1188301113468_link',null,[['_idJsp3:_idJsp4','8/28/07']]);"
id="_idJsp3:_idJsp4_1188301113468_link">28</a></td><td>
<a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_
1188387513468_link',null,[['_idJsp3:_idJsp4','8/29/07']]);"
id="_idJsp3:_idJsp4_1188387513468_link">29</a></td><td>
<a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_idJsp4_
1188473913468_link',null,[['_idJsp3:_idJsp4','8/30/07']]);"
id="_idJsp3:_idJsp4_1188473913468_link">30</a></td><td>
<a href="#" onclick="return oamSubmitForm('_idJsp3','_idJsp3:_
idJsp4_1188560313468_link',null,[['_idJsp3:_idJsp4','8/31/07']]);"
id="_idJsp3:_idJsp4_1188560313468_link">31</a></td><td></td></tr>
</table>
<pre>------------------------</pre>
<input id="secondOne" name="secondOne" type="text"
onfocus="selectText('MM/DD/YYYY', 'secondOne')"
onclick="selectText('MM/DD/YYYY', 'secondOne')" value="MM/DD/YYYY" />
<span id="secondOneSpan"></span><script type="text/javascript"><!--
secondOneCalendarVar=new org_apache_myfaces_PopupCalendar();
secondOneCalendarVar.initData.imgDir = "/tomahawk_tags/faces/
myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.
MyFacesResourceLoader/11859544/calendar.HtmlCalendarRenderer/DB/";
secondOneCalendarVar.initData.monthName = new Array("January",
"February","March","April","May","June","July","August","September",
"October","November","December");
secondOneCalendarVar.initData.dayName = new Array("Sun","Mon","Tue",
"Wed","Thu","Fri","Sat");
secondOneCalendarVar.initData.startAt = 0;
secondOneCalendarVar.dateFormatSymbols.weekdays = new Array("Sunday",
"Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
secondOneCalendarVar.dateFormatSymbols.shortWeekdays = new Array("Sun",
"Mon","Tue","Wed","Thu","Fri","Sat");
secondOneCalendarVar.dateFormatSymbols.shortMonths = new Array("Jan",
"Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
secondOneCalendarVar.dateFormatSymbols.months = new Array("January",
"February","March","April","May","June","July","August","September",
"October","November","December");
secondOneCalendarVar.dateFormatSymbols.eras = new Array("BC","AD");
secondOneCalendarVar.dateFormatSymbols.ampms = new Array("AM","PM");
secondOneCalendarVar.initData.todayString = "The date today is :";
secondOneCalendarVar.initData.todayDateFormat = "dd-MMM-yyyy";
secondOneCalendarVar.initData.weekString = "Week";
secondOneCalendarVar.initData.popupLeft = false;
secondOneCalendarVar.init(document.getElementById('secondOneSpan'));
//--></script><img src="images/cal.gif" style="vertical-align:bottom;"
onclick="secondOneCalendarVar._popUpCalendar(this,document.
getElementById('secondOne'),'MM/dd/yyyy')" />
<input type="hidden" name="_idJsp3_SUBMIT" value="1" />
<input type="hidden" name="_idJsp3:_idJsp4" />
<input type="hidden" name="_idJsp3:_link_hidden_" />
<input type="hidden" name="_idJsp3:_idcl" />
<script type="text/javascript"><!--
function clear__5FidJsp3()
{
clearFormHiddenParams__idJsp3('_idJsp3');
}
function clearFormHiddenParams__idJsp3(currFormName)
{
var f = document.forms['_idJsp3'];
f.elements['_idJsp3:_idJsp4'].value='';
f.elements['_idJsp3:_link_hidden_'].value='';
f.elements['_idJsp3:_idcl'].value='';
f.target='';
}
clearFormHiddenParams__idJsp3();
//--></script><input type="hidden" name="javax.faces.ViewState"
id="javax.faces.ViewState" value="rO0ABXVyABNbTGphdmEubGFuZy5P
YmplY3Q7kM5YnxBzKWwCAAB4cAAAAANzcgBHb3JnLmFwYWNoZS5teWZhY2VzLmF
wcGxpY2F0aW9uLlRyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3RDb21wb2
5lbnRGWRfYnEr2zwIABFsACV9jaGlsZHJlbnQASltMb3JnL2FwYWNoZS9t" />
</form></center>
</body>
</html>
This tag contains attributes given below :
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
Ask Questions? Discuss: Tomahawk inputCalendar tag
Post your Comment