HTML and CSS Reference
In-Depth Information
Listing 7-18.
Examples of Using the inputDate Composite Component
<h:form>
<h1>JSF Component</h1>
<section>
<label>Date (with a null java.util.Date): </label>
<projsfhtml5:inputDate value="#{componentInputDate.emptyDate}" />
<h:outputLabel value="Selected date:" />
<h:outputText value="#{componentInputDate.emptyDate}">
<f:convertDateTime dateStyle="short" />
</h:outputText>
</section>
<section>
<label>Date (with a java.util.Date): </label>
<projsfhtml5:inputDate value="#{componentInputDate.selectedDate}"
step="10"
min="#{componentInputDate.minDate}"
max="#{componentInputDate.maxDate}" />
<h:outputLabel value="Selected date:" />
<h:outputText value="#{componentInputDate.selectedDate}">
<f:convertDateTime dateStyle="short" />
</h:outputText>
</section>
<section>
<label>Date (readonly): </label>
<projsfhtml5:inputDate value="#{componentInputDate.selectedDate}"
readonly="true" />
</section>
<section>
<label>Date (with a list of dates): </label>
<projsfhtml5:inputDate value="#{componentInputDate.selectedDate2}"
list="available-dates" />
<projsfhtml5:dataList id="available-dates">
<projsfhtml5:option label="1st Option" value="2012-01-01" />
<projsfhtml5:option label="2nd Option" value="2012-01-02" />
<projsfhtml5:option label="3rd Option" value="2012-01-03" />
</projsfhtml5:dataList>
<h:outputLabel value="Selected date:" />
<h:outputText value="#{componentInputDate.selectedDate2}">
<f:convertDateTime dateStyle="short" />
</h:outputText>
</section>
<h:commandButton value="Submit" />
</h:form>
