Tomahawk inputDate tag

This tag is useful in creating the component to input the date. This tag provides many useful attributes to provide features according to our requirement.

Tomahawk inputDate tag

        

This tag is useful in creating the component to input the date. This tag provides many useful attributes to provide features according to our requirement. This component can be of various types. We can create this component to input time only or date only or both. Time can also be supplied in12 hour or 24 hour format. The time can also be set according to the supplied time zone. The popup calendar can also be rendered if needed. We can also use CSS and java script to make it useful according to our requirement.

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:inputDate example</title>
	<style type="text/css">
<!-- .highlight { background-color: #A8D1E8; color:blue;}-->
</style>
</t:documentHead>
<t:documentBody >
<h:form>
	<t:inputDate id="date1" /></p>
	<t:inputDate id="date2" popupCalendar="true" /></p>
	<t:inputDate id="date3" type="time"/></p>
	<t:inputDate id="date4" type="date"/></p>
	<t:inputDate id="date5" type="short_time"/></p>
	<t:inputDate id="date6" type="both"/></p>
	<t:inputDate id="date7" type="full"/></p>
	<t:inputDate id="date8" emptyMonthSelection="Select Month" 
	type="date" popupCalendar="true" 
	onmouseover="this.className='highlight'" 
	onmouseout="this.className='normal'"/></p>
	<t:inputDate id="date9" type="time" ampm="true" emptyAmpmSelection="AM/PM" />
</h:form>
</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/11
	859544/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>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>t:inputDate example</title>
<style type="text/css">
<!--
.highlight { background-color: #A8D1E8; color:blue;}
-->
</style>
</head>
<body>
<form id="_idJsp3" name="_idJsp3" method="post" 
action="/tomahawk_tags/pages/inputDate.jsf" 
enctype="application/x-www-form-urlencoded"> 
<span id="_idJsp3:date1"><input id="_idJsp3:date1.day" 
name="_idJsp3:date1.day" size="2" maxlength="2" />
<select id="_idJsp3:date1.month" name="_idJsp3:date1.month" 
size="1">
<option value="-1" selected="selected"></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option> 
<option value="5">May</option> 
<option value="6">June</option> 
<option value="7">July</option> 
<option value="8">August</option> 
<option value="9">September</option> 
<option value="10">October</option> 
<option value="11">November</option> 
<option value="12">December</option>
</select><input id="_idJsp3:date1.year" name="_idJsp3:date1.year" 
size="4" maxlength="4" /></span></p>
<span id="_idJsp3:date2"><input id="_idJsp3:date2.day" 
name="_idJsp3:date2.day" size="2" maxlength="2" />
<select id="_idJsp3:date2.month" name="_idJsp3:date2.month" size="1">
<option value="-1" selected="selected"></option> 
<option value="1">January</option> 
<option value="2">February</option> 
<option value="3">March</option> 
<option value="4">April</option> 
<option value="5">May</option> 
<option value="6">June</option> 
<option value="7">July</option> 
<option value="8">August</option> 
<option value="9">September</option> 
<option value="10">October</option> 
<option value="11">November</option> 
<option value="12">December</option></select>
<input id="_idJsp3:date2.year" name="_idJsp3:date2.year" 
size="4" maxlength="4" /><span id="_idJsp3:date2Span">
</span><script type="text/javascript"><!--
var _5FidJsp3_3Adate2CalendarVar=new org_apache_myfaces_PopupCalendar();
_5FidJsp3_3Adate2CalendarVar.initData.imgDir = 
"/tomahawk_tags/faces/myFacesExtensionResource/org.apache.myfaces.
renderkit.html.util.MyFacesResourceLoader/11859544/
calendar.HtmlCalendarRenderer/DB/";
_5FidJsp3_3Adate2CalendarVar.initData.monthName = 
new Array("January","February","March","April","May",
"June","July","August","September","October","November","December");
_5FidJsp3_3Adate2CalendarVar.initData.dayName = 
new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
_5FidJsp3_3Adate2CalendarVar.initData.startAt = 0;
_5FidJsp3_3Adate2CalendarVar.dateFormatSymbols.weekdays = 
new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
_5FidJsp3_3Adate2CalendarVar.dateFormatSymbols.shortWeekdays = 
new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
_5FidJsp3_3Adate2CalendarVar.dateFormatSymbols.shortMonths = 
new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
_5FidJsp3_3Adate2CalendarVar.dateFormatSymbols.months = 
new Array("January","February","March","April","May","June","July","August",
"September","October","November","December");
_5FidJsp3_3Adate2CalendarVar.dateFormatSymbols.eras = 
new Array("BC","AD");
_5FidJsp3_3Adate2CalendarVar.dateFormatSymbols.ampms = 
new Array("AM","PM");
_5FidJsp3_3Adate2CalendarVar.init(document.getElementById('_idJsp3:date2Span'));
//--></script><input type="button" onclick="_5FidJsp3_3Adate2CalendarVar.
_popUpCalendarForInputDate('_idJsp3:date2','M/d/yy');" value="..." /></span></p>
<span id="_idJsp3:date3"><input id="_idJsp3:date3.hours" 
name="_idJsp3:date3.hours" size="2" maxlength="2" />:
<input id="_idJsp3:date3.minutes" name="_idJsp3:date3.minutes" size="2" 
maxlength="2" />:<input id="_idJsp3:date3.seconds" 
name="_idJsp3:date3.seconds" size="2" maxlength="2" /></span></p>

<span id="_idJsp3:date4"><input id="_idJsp3:date4.day" 
name="_idJsp3:date4.day" size="2" maxlength="2" />
<select id="_idJsp3:date4.month" name="_idJsp3:date4.month" size="1">
<option value="-1" selected="selected"></option> 
<option value="1">January</option> 
<option value="2">February</option> 
<option value="3">March</option> 
<option value="4">April</option> 
<option value="5">May</option> 
<option value="6">June</option> 
<option value="7">July</option> 
<option value="8">August</option> 
<option value="9">September</option> 
<option value="10">October</option> 
<option value="11">November</option> 
<option value="12">December</option>
</select>
<input id="_idJsp3:date4.year" name="_idJsp3:date4.year" size="4" maxlength="4" />
</span></p> 
<span id="_idJsp3:date5"><input id="_idJsp3:date5.hours" 
name="_idJsp3:date5.hours" size="2" maxlength="2" />:
<input id="_idJsp3:date5.minutes" name="_idJsp3:date5.minutes" 
size="2" maxlength="2" /></span></p>

<span id="_idJsp3:date6"><input id="_idJsp3:date6.day" 
name="_idJsp3:date6.day" size="2" maxlength="2" />
<select id="_idJsp3:date6.month" name="_idJsp3:date6.month" size="1">
<option value="-1" selected="selected"></option> 
<option value="1">January</option> 
<option value="2">February</option> 
<option value="3">March</option> 
<option value="4">April</option> 
<option value="5">May</option> 
<option value="6">June</option> 
<option value="7">July</option> 
<option value="8">August</option> 
<option value="9">September</option> 
<option value="10">October</option> 
<option value="11">November</option> 
<option value="12">December</option>
</select>
<input id="_idJsp3:date6.year" name="_idJsp3:date6.year" size="4" 
maxlength="4" /> <input id="_idJsp3:date6.hours" 
name="_idJsp3:date6.hours" size="2" maxlength="2" />:
<input id="_idJsp3:date6.minutes" name="_idJsp3:date6.minutes" 
size="2" maxlength="2" /></span></p> 
<span id="_idJsp3:date7"><input id="_idJsp3:date7.day" 
name="_idJsp3:date7.day" size="2" maxlength="2" />
<select id="_idJsp3:date7.month" name="_idJsp3:date7.month" 
size="1">
<option value="-1" selected="selected"></option> 
<option value="1">January</option> 
<option value="2">February</option> 
<option value="3">March</option> 
<option value="4">April</option> 
<option value="5">May</option> 
<option value="6">June</option> 
<option value="7">July</option> 
<option value="8">August</option> 
<option value="9">September</option> 
<option value="10">October</option> 
<option value="11">November</option> 
<option value="12">December</option>
</select>
<input id="_idJsp3:date7.year" name="_idJsp3:date7.year" 
size="4" maxlength="4" /> <input id="_idJsp3:date7.hours" 
name="_idJsp3:date7.hours" size="2" maxlength="2" />:
<input id="_idJsp3:date7.minutes" name="_idJsp3:date7.minutes" 
size="2" maxlength="2" />:<input id="_idJsp3:date7.seconds" 
name="_idJsp3:date7.seconds" size="2" maxlength="2" /></span></p>


<span id="_idJsp3:date8"><input onmouseover="this.className='highlight'" 
onmouseout="this.className='normal'" id="_idJsp3:date8.day" 
name="_idJsp3:date8.day" size="2" maxlength="2" />
<select id="_idJsp3:date8.month" name="_idJsp3:date8.month" size="1" 
onmouseover="this.className='highlight'" onmouseout="this.className='normal'">
<option value="-1" selected="selected">Select Month</option> 
<option value="1">January</option> 
<option value="2">February</option> 
<option value="3">March</option> 
<option value="4">April</option> 
<option value="5">May</option> 
<option value="6">June</option> 
<option value="7">July</option> 
<option value="8">August</option> 
<option value="9">September</option> 
<option value="10">October</option> 
<option value="11">November</option> 
<option value="12">December</option>
</select>
<input onmouseover="this.className='highlight'" 
onmouseout="this.className='normal'" id="_idJsp3:date8.year" 
name="_idJsp3:date8.year" size="4" maxlength="4" />
<span id="_idJsp3:date8Span"></span><script type="text/javascript">
<!--
var _5FidJsp3_3Adate8CalendarVar=new org_apache_myfaces_PopupCalendar();
_5FidJsp3_3Adate8CalendarVar.initData.imgDir = 
"/tomahawk_tags/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.
html.util.MyFacesResourceLoader/11859544/calendar.HtmlCalendarRenderer/DB/";
_5FidJsp3_3Adate8CalendarVar.initData.monthName = 
new Array("January","February","March","April","May","June","July","August",
"September","October","November","December");
_5FidJsp3_3Adate8CalendarVar.initData.dayName = new Array("Sun","Mon","Tue",
"Wed","Thu","Fri","Sat");
_5FidJsp3_3Adate8CalendarVar.initData.startAt = 0;
_5FidJsp3_3Adate8CalendarVar.dateFormatSymbols.weekdays = 
new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
_5FidJsp3_3Adate8CalendarVar.dateFormatSymbols.shortWeekdays = 
new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
_5FidJsp3_3Adate8CalendarVar.dateFormatSymbols.shortMonths = 
new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
_5FidJsp3_3Adate8CalendarVar.dateFormatSymbols.months = 
new Array("January","February","March","April","May","June","July","August",
"September","October","November","December");
_5FidJsp3_3Adate8CalendarVar.dateFormatSymbols.eras = 
new Array("BC","AD");
_5FidJsp3_3Adate8CalendarVar.dateFormatSymbols.ampms = 
new Array("AM","PM");
_5FidJsp3_3Adate8CalendarVar.init(document.getElementById('_idJsp3:date8Span'));

//--></script><input type="button" onclick="_5FidJsp3_3Adate8CalendarVar.
_popUpCalendarForInputDate('_idJsp3:date8','M/d/yy');" value="..." /></span></p>


<span id="_idJsp3:date9"><input id="_idJsp3:date9.hours" name="_idJsp3:date9.
hours" size="2" maxlength="2" />:<input id="_idJsp3:date9.minutes" 
name="_idJsp3:date9.minutes" size="2" maxlength="2" />:
<input id="_idJsp3:date9.seconds" name="_idJsp3:date9.seconds" size="2" 
maxlength="2" /><select id="_idJsp3:date9.ampm" name="_idJsp3:date9.ampm" 
size="1">
<option value="-1" selected="selected">AM/PM</option> 
<option value="0">AM</option> 
<option value="1">PM</option></select></span>
<input type="hidden" name="_idJsp3_SUBMIT" value="1" />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState"
value="rO0ABXVyABNbTGphdmEubGFuZy5PYmplY3Q7kM5YnxBzKWwCAAB4cAAAAANzcgBHb3JnL
mFwYWNoZS5teWZhY2VzLmFwcGxpY2F0aW9uLlRyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3
RDb21wb25lbnRGWRfYnEr2zwIABFsACV9jaGlsZHJlbnQASltMb3JnL2FwYWNoZS9teWZhY2VzL2F
cGxpY2F0aW9uL1RyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3RDb21wb25lbnQ7TAAPX2Nvb
XBvbmVudENsYXNzdAASTGphdmEvbGFuZy9TdHJpbmc7TAAMX2NvbXBvbmVudElkcQB+AARbAAdfZm
FjZXRzdAATW0xqYXZhL2xhbmcvT2JqZWN0O3hwdXIASltMb3JnLmFwYWNoZS5teWZhY2VzLmFwcGx
pY2F0aW9uLlRyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3RDb21wb25lbnQ7uqwnyBGF" />
</form>
</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.
  • type : This attribute specifies the type of value to be accepted. It can take values "date" "time" "short_time" "both" "full".
  • popupCalendar : This attribute ensures whether the popup calendar is to be rendered with this component.
  • timeZone : This attribute specifies the time zone for this component.
  • ampm : This boolean attribute, default false, specifies whether to use 12 hour am/pm time or 24 hour time.
  • emptyMonthSelection : This attribute is used for label used when displaying empty month selection.
  • emptyAmpmSelection : This attribute is used for label used when displaying empty AM/PM selection.

Advertisements

Spring Framework Training

R Programming Training

Share on Google+Share on Google+

Tomahawk inputDate tag

Posted on: December 18, 2008 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

 

Related Tutorials

Discuss: Tomahawk inputDate tag  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0

Ads

 

Ads

Services

HomeAbout UsPrivacy PolicySite Map
©2001 - 2017 Rose India Technologies Pvt. Ltd. All Rights are Reserved