tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/40-date/Date.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<!--
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
-->

<ui:composition template="/main.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:tc="http://myfaces.apache.org/tobago/component"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core">

  <p>The <code class="language-markup">&lt;tc:date/&gt;</code>
    tag create an input field with a button to open a calendar to edit the date.
    The date can also be edited in the textfield.</p>
  <p>Tag Library Documentation:
    <tc:link label="&lt;tc:date/>" image="#{request.contextPath}/image/feather-leaf.png" link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/date.html"/>
    |
    <tc:link label="&lt;f:convertDateTime/>"
             link="https://docs.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/f/convertDateTime.html"/>
  </p>

  <tc:section label="Basics">
    <p>In general, a date should always have a label. To get a label use the <code>label</code> attribute.</p>
    <p>It is recommended to use a pattern. For that, use <code>&lt;f:convertDateTime&gt;</code>.</p>
    <p>The <code>value</code> must be a
      <tc:link label="Date" link="https://docs.oracle.com/javase/8/docs/api/java/util/Date.html"/>
      or a string with a matching pattern.</p>
        <demo-highlight language="markup">&lt;tc:date label="Date" value="\#{dateController.now}"&gt;
  &lt;f:convertDateTime pattern="dd.MM.yyyy"/&gt;
&lt;/tc:date&gt;</demo-highlight>
    <tc:date id="dNormal" label="Date" value="#{dateController.now}">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:date>
    <tc:date id="dReadonly" label="Read Only" readonly="true" value="#{dateController.now}">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:date>
    <tc:date id="d3" label="Disabled" disabled="true" value="#{dateController.now}">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:date>
    <tc:date id="d4" value="#{dateController.now}">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:date>
  </tc:section>
  <tc:section label="Focus">
    <p>The following date should be selected after reloading the page. This can be done with the attribute
      <code>focus</code>.</p>
        <demo-highlight language="markup">&lt;tc:date label="Date (focus)" focus="true"&gt;
  &lt;f:convertDateTime pattern="dd.MM.yyyy"/&gt;
&lt;/tc:date&gt;</demo-highlight>
    <tc:date id="d5" label="Date (focus)" focus="true">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:date>
  </tc:section>

  <tc:section label="Required">
    <p>A date can be set as required with the <code>required</code> attribute.
      Such a date must contain a value, otherwise a submit is not possible.
      Leave the field blank and press 'submit' to see the error message.</p>
    <demo-highlight language="markup">&lt;tc:date label="Date (required)" required="true"
    value="\#{dateController.once}"></demo-highlight>
    <tc:form>
      <tc:date id="dreq" label="Date (required)" required="true" value="#{dateController.once}">
        <f:convertDateTime pattern="dd.MM.yyyy"/>
      </tc:date>
      <tc:button label="Submit"/>
    </tc:form>
  </tc:section>

  <tc:section label="Dates in other components">
    <p>A Java date can also be displayed in other components. Please use an appropriate converter.</p>
    <tc:section label="Input">
            <demo-highlight language="markup">&lt;tc:in label="Date in Textfield" value="\#{dateController.today}"&gt;
  &lt;f:convertDateTime pattern="dd.MM.yyyy"/&gt;
&lt;/tc:in&gt;</demo-highlight>
      <tc:in id="i1" label="Date in Textfield" value="#{dateController.now}">
        <f:convertDateTime pattern="dd.MM.yyyy"/>
      </tc:in>
    </tc:section>
    <tc:section label="Text Area">
            <demo-highlight language="markup">&lt;tc:textarea label="Date in Text Area" value="\#{dateController.today}"&gt;
  &lt;f:convertDateTime pattern="dd.MM.yyyy"/&gt;
&lt;/tc:textarea&gt;</demo-highlight>
      <tc:textarea id="t1" label="Date in Text Area" value="#{dateController.now}">
        <f:convertDateTime pattern="dd.MM.yyyy"/>
      </tc:textarea>
    </tc:section>
    <tc:section label="Output">
            <demo-highlight language="markup">&lt;tc:out label="Date in Output" value="\#{dateController.today}"&gt;
  &lt;f:convertDateTime pattern="dd.MM.yyyy"/&gt;
&lt;/tc:out&gt;</demo-highlight>
      <tc:out id="o1" label="Date in Output" value="#{dateController.now}">
        <f:convertDateTime pattern="dd.MM.yyyy"/>
      </tc:out>
    </tc:section>
    <tc:section label="Label">
            <demo-highlight language="markup">&lt;tc:label value="\#{dateController.today}"&gt;
  &lt;f:convertDateTime pattern="dd.MM.yyyy"/&gt;
&lt;/tc:label&gt;</demo-highlight>
      <tc:label id="l1" value="#{dateController.now}">
        <f:convertDateTime pattern="dd.MM.yyyy"/>
      </tc:label>
    </tc:section>
  </tc:section>
  <tc:section label="Pattern And Button">
    <p>Here are some examples for different pattern. The format is used from
      <tc:link label="java.text.SimpleDateFormat" link="https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/text/SimpleDateFormat.html"/>.</p>
    <p>Also the type of the button changed with the <code>type</code> attribute.</p>
    <tc:section label="Month">
            <demo-highlight language="markup">&lt;tc:date label="Month" value="\#{dateController.today}"&gt;
  &lt;f:convertDateTime pattern="MM/yyyy" type="date"/&gt;
&lt;/tc:date&gt;</demo-highlight>
      <tc:date id="d6" label="Month" value="#{dateController.now}">
        <f:convertDateTime pattern="MM/yyyy" type="date"/>
      </tc:date>
    </tc:section>
    <tc:section label="Minutes">
            <demo-highlight language="markup">&lt;tc:date label="Time" value="\#{dateController.today}"&gt;
  &lt;f:convertDateTime pattern="HH:mm" type="time"/&gt;
&lt;/tc:date&gt;</demo-highlight>
      <tc:date id="d7" label="Time" value="#{dateController.now}">
        <f:convertDateTime pattern="HH:mm" type="time"/>
      </tc:date>
    </tc:section>
    <tc:section label="Seconds">
            <demo-highlight language="markup">&lt;tc:date label="Time" value="\#{dateController.today}"&gt;
  &lt;f:convertDateTime pattern="HH:mm:ss" type="time"/&gt;
&lt;/tc:date&gt;</demo-highlight>
      <tc:date id="d8" label="Time" value="#{dateController.now}">
        <f:convertDateTime pattern="HH:mm:ss" type="time"/>
      </tc:date>
    </tc:section>
    <tc:section label="Month with minutes">
            <demo-highlight language="markup">&lt;tc:date label="Date and time" value="\#{dateController.today}"&gt;
  &lt;f:convertDateTime pattern="dd.MM. - HH:mm" type="both"/&gt;
&lt;/tc:date&gt;</demo-highlight>
      <tc:date id="dateTimePattern" label="Date and time" value="#{dateController.now}">
        <f:convertDateTime pattern="dd.MM. - HH:mm" type="both"/>
      </tc:date>
    </tc:section>
    <tc:section label="Today Button">
      <p>Display a today button on the datepicker with the attribute <code>todayButton=true</code>.</p>
      <tc:date id="dateTodayButton" label="Today Button" value="#{dateController.now}" todayButton="true">
        <f:convertDateTime pattern="dd.MM.yyyy"/>
      </tc:date>
    </tc:section>
  </tc:section>
  <tc:section label="Styles">
    <p>Styles can be set with the attributes <code>dateStyle</code> and <code>timeStyle</code>.
      Possible values are 'short', 'medium', 'long' and 'full'.</p>
    <tc:date id="d10" label="Short style" value="#{dateController.now}">
      <f:convertDateTime dateStyle="short" timeStyle="short" type="both"/>
    </tc:date>
    <tc:date id="d11" label="Medium Style" value="#{dateController.now}">
      <f:convertDateTime dateStyle="medium" timeStyle="medium" type="both"/>
    </tc:date>
    <tc:date id="d12" label="Long Style" value="#{dateController.now}">
      <f:convertDateTime dateStyle="long" timeStyle="long" type="both"/>
    </tc:date>
    <tc:date id="d13" label="Full Style" value="#{dateController.now}">
      <f:convertDateTime dateStyle="full" timeStyle="full" type="both"/>
    </tc:date>
  </tc:section>
  <tc:section label="Submit">
    <tc:form id="formSubmit">
      <p>Press the button to submit the date to the server. The output field show the current value.
        The date can be changed with the datepicker or by entering a valid date in the textfield.</p>
      <tc:date id="input" label="Input" value="#{dateController.submitDate}">
        <f:convertDateTime pattern="dd.MM.yyyy"/>
      </tc:date>
      <tc:out id="output" label="Output" value="#{dateController.submitDate}">
        <f:convertDateTime pattern="dd.MM.yyyy"/>
      </tc:out>
      <tc:button id="button" label="Submit"/>
    </tc:form>
  </tc:section>
  <tc:section label="Ajax">
    <p>The output field in this example, display the given date.
      With <code class="language-markup">&lt;f:ajax render="outputfield"/></code>,
      the <code class="language-markup">&lt;tc:out id="outputfield" .../></code> will be rerendered,
      after the date changed.
      The date can be changed by button or by entering a valid date in the textfield. If the date is not valid,
      it won't be adopted.</p>
    <tc:date id="ajaxinput" label="On Change" value="#{dateController.onchange}">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
      <f:ajax render="outputfield"/>
    </tc:date>
    <tc:out id="outputfield" label="On Server" value="#{dateController.onchange}">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:out>
  </tc:section>
</ui:composition>