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 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 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 :
Ads