Tomahawk inputCalendar tag

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;
               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>
       </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">&lt;</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">&gt;</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 :

id : This is the value which is used to uniquely identify the component within the closest container like form or subview. The main thing to remember is that its value must be a static value.

binding : This attribute is used to specify the property of the backing bean with which this component instance is to be bound.

rendered : Its default value is true. If this attribute is set to true then this component is presented in the page to the user. If false, then this component is not rendered.

value : The initial value of the component is set to this attribute.

converter : This attribute is used to specify the converter for the component.

immediate : This attribute is a boolean attribute that is used to identify the phase during which the value change event should be fired. In normal processing of the event, if immediate attribute is not set to true, the value change event is fired during the invoke application phase but if immediate attribute is set to true then the event is fired at the end of apply request value phase.

required : This is a boolean attribute. If it is set to true then it is necessary for the component to have the value otherwise an error message is rendered to the user for the component.

validator : It takes the method binding expression. This expression represents the validator method. This method is called at the time of validation of the component.

valueChangeListener : This also takes a method binding expression. This expression represents value change listener method. This method will be called when new value is set for this component. you can change the phase of the life cycle when this method should be fired by the use of immediate attribute discussed above.

dir : It is used to set the direction of the text to be displayed. It can take two values LTR(left to right) and RTL (right to left).

lang : It is used to set the base language of the component when displayed.

style : It is used to set the CSS style definition for the component.

title : It is the standard html attribute. It is used to set the tooltip text for this component.

styleClass : It is used to set the CSS class for the component. It is same as html class attribute.

onclick : Script to be invoked when the element is clicked.

ondblclick : It is used for Java Script code to be invoked when the element is double-clicked.

onmousedown : It is used for Java Script code to be invoked when the pointing device is pressed over this element.

onmouseup : It is used for Java Script code to be invoked when the pointing device is released over this element.

onmouseover : It is used for Java Script code to be invoked when the pointing device is moved into this element.

onmousemove : It is used for Java Script code to be invoked when the pointing device is moved while it is in this element.

onmouseout : It is used for Java Script code to be invoked when the pointing device is moved out of this element.

onkeypress : It is used for Java Script code to be invoked when a key is pressed over this element.

onkeydown : It is used for Java Script code to be invoked when a key is pressed down over this element.

onkeyup : It is used for Java Script code to be invoked when a key is released over this element.

accesskey : This is standard html attribute. It is used to set the access key for the element which is used to send the focus to the element when pressed.

align : This attribute is used to set the horizontal alignment of the component.

alt : This is used as an alternate text that is displayed when browser is not able to display the element.

disabled : Its a boolean attribute. This is used to disable the element to receive focus, when it is set to true.

onblur : This attribute sets JavaScript code to execute when the component loses the focus.

onfocus : This attribute sets JavaScript code to execute when the component receives the focus.

onchange : This attribute sets JavaScript code to execute when the element is modified.

onselect : This attribute sets JavaScript code to execute when the element is selected.

readonly : Its a boolean attribute. It is used to indicate the user that its value can't be modified, if it is set to true.

tabindex : This is a standard html attribute. It is used to set the order of receiving the focus on the movement of TAB key by the user.

maxlength : It is used to set the maximum length of character that can be input into the text field.

size : It is used to set the width (in character) of the component.

enabledOnUserRole : If the current user has one of the roles listed in the enabledOnUserRole attribute then enabling or disabling of the component is decided on the base of "disabled" attribute. If disabled attribute is set to true then component is disabled otherwise enabled. If the user is not in the above list then the component is rendered disabled.

visibleOnUserRole : If the current user has one of the roles listed in the visibleOnUserRole attribute then processing of the component is decided on the base of "rendered" attribute. If the rendered attribute is set to true then component is not rendered otherwise displayed on the page. On the other hand if the current user is not in the above list then the component is not processed.

forceId : This is a boolean attribute with default value false. If this attribute is set to true, the tag is forced to render the id for the component exactly as mentioned in the id attribute of the tag. The benefit of this attribute is that we can reference component by id in the javascript. If we don't use this attribute with the true value then the id for the component is presented in different format.

forceIdIndex : This is a boolean attribute with default value true. If this value is true then the the component displays the index number in its id value if the component is in a list. If this attribute is set to false then this component will not append index number as suffix . If forcrId is set to false then its value is ignored.

monthYearRowClass : It is used to set the CSS class for the header showing month and year.

weekRowClass : It is used to set the CSS class for the header showing week days.

dayCellClass : It is used to set the CSS class for all days within the calendar.

currentDayCellClass : It is used to set the CSS class for current day within the calendar.

renderAsPopup : This attribute is used to render the input calendar.

popupLeft : This attribute is used to render the input calendar on the left of the button.

addResources : It is used to automatically add the input calendar scripts and css files to the header. If you want to provide it yourself then set this attribute to false.

popupDateFormat : It specifies the format of the date to be displayed on the component when the date is selected.

popupButtonString : This is used to provide the text on the button that opens the calendar.

popupButtonStyle : This is used to define the style for button that opens the calendar.

popupButtonStyleClass : This is used to define the style class for button that opens the calendar.

popupGotoString : This is used to set the string for "Go To Current Month".

popupTodayString : This is used to set the string for "Today is". You can set it your own.

popupTodayDateFormat : This is used to set the format of the current date displayed on the calendar.

popupWeekString : This is used to set our own string in place of "Wk"

popupScrollLeftMessage : This is used to set the string for scrolling to the left.

popupScrollRightMessage : This is used to set the string for scrolling to the right.

popupSelectMonthMessage : This is used to set the string for "Click to select a month".

popupSelectYearMessage : This is used to set the string for "Click to select a year".

popupSelectDateMessage : This is used to set the string for "Select [date] as date"

popupTheme : This is used to set the theme-prefix for this component.

popupButtonImageUrl : This is used to set the url to the image for this popupButton.

renderPopupButtonAsImage : This is a boolean attribute, which if true, renders a calendar icon instead of the button to pop up the calendar.

helpText : The value of this attribute renders text in the field that helps the user to find the right format of the value.

javascriptLocation : This attribute is used for alternate location to find javascript resources.

imageLocation : This attribute is used for alternate location to find image resources.

styleLocation : This attribute is used for alternate location to find style resources.

displayValueOnly : This is boolean attribute with the default value false. If this value is set to true then only the value of the component is rendered not the widget of the component.

displayValueOnlyStyle : This attribute is used to specify the style used when displayValueOnly is true.

displayValueOnlyStyleClass : This attribute is used to specify the style class used when displayValueOnly is true.