« Updated Glasspane example in ADF Faces RC with native functionality example | Main | ADF Faces RC: How-to cancel an edit form, undoing the edits »
JDeveloper 11 - InputDate: How-to set the default year in the date popup
By frank.nimphius | December 19, 2008
Before starting I should mention that this is a JavaScript hack that depends on the knowledge of how the af:inputDate component renders in the browser. This means however that there is a risk attached to it that this solution stops working in a future release of ADF Faces RC if the generated component HTML markup changes. So be aware !
A quite common usecase is that users like to pre-set the year of the calendar popup for the af:inputDate field when there is no default value set. You can do this with the following JavaScript solution that sets the selected year to 1966.
-
<f:view>
-
<af:document id="d1">
-
<f:facet name="metaContainer">
-
<trh:script>
-
function setYearOnDate(){
-
var input = document.getElementById("mdate::pop::cd::ys::content");
-
input.value="1966";
-
}
-
</trh:script>
-
</f:facet>
-
<af:form id="f1">
-
<af:inputDate label="Label 1" id="mdate" minValue="2008-01-19">
-
<af:clientListener method="setYearOnDate" type="blur"/>
-
</af:inputDate>
-
</af:form>
-
</af:document>
-
</f:view>
The key to this is that the af:inputDate filed has a custom ID defined (which is "mdate" in this example). Based on this infromation, its possible to find and set the year field of the component using the document.getElementById API. An extended version of this preserves existing dates, like the default date and looks as follows
-
<f:view>
-
<af:document id="d1">
-
<f:facet name="metaContainer">
-
<trh:script>
-
function setYearOnDate(){
-
var input = document.getElementById("mdate::pop::cd::ys::content");
-
var dateComp = AdfPage.PAGE.findComponent("mdate");
-
if (dateComp.getSubmittedValue().length == 0){
-
input.value="1966";
-
}
-
}
-
</trh:script>
-
</f:facet>
-
<af:form id="f1">
-
<af:inputDate label="Label 1" id="mdate">
-
<af:clientListener method="setYearOnDate" type="blur"/>
-
</af:inputDate>
-
</af:form>
-
</af:document>
-
</f:view>
Frank
Topics: ADF Faces RC |
Comments are closed.
