The `<tc:date/>` tag create an inputfield with a button to open a calendar to edit the date. The date can also be edited in the textfield.

Tag Library Documentation: |

In general, a date should always have a label. To get a label use the `label` attribute.

It is recommended to use a pattern. For that, use `<f:convertDateTime>`.

The `value` must be a or a string with a matching pattern.

    <tc:date label="Date" value="\#{dateController.now}">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:date>

The following date should be selected after reloading the page. This can be done with the attribute `focus`.

    <tc:date label="Date (focus)" focus="true">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:date>

A date can be set as required with the `required` attribute. Such a date must contain a value, otherwise a submit is not possible. Leave the field blank and press 'submit' to see the errormessage.

    <tc:date label="Date (required)" required="true"
        value="\#{dateController.once}">

A date can also be displayed in other components.

    <tc:in label="Date in Textfield" value="\#{dateController.today}">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:in>

    <tc:textarea label="Date in Text Area" value="\#{dateController.today}">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:textarea>

    <tc:out label="Date in Output" value="\#{dateController.today}">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:out>

    <tc:label value="\#{dateController.today}">
      <f:convertDateTime pattern="dd.MM.yyyy"/>
    </tc:label>

Here are some examples for different pattern. The format is used from java.text.SimpleDateFormat. TODO:setlink

Also the type of the button changed with the `type` attribute.

    <tc:date label="Month" value="\#{dateController.today}">
      <f:convertDateTime pattern="MM/yyyy" type="date"/>
    </tc:date>

    <tc:date label="Time" value="\#{dateController.today}">
      <f:convertDateTime pattern="HH:mm" type="time"/>
    </tc:date>

    <tc:date label="Time" value="\#{dateController.today}">
      <f:convertDateTime pattern="HH:mm:ss" type="time"/>
    </tc:date>

    <tc:date label="Date and time" value="\#{dateController.today}">
      <f:convertDateTime pattern="dd.MM. - HH:mm" type="both"/>
    </tc:date>

Styles can be set with the attributes `dateStyle` and `timeStyle`. Possible values are 'short', 'medium', 'long' and 'full'.

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.

The outputfield in this example, display the given date. With `<f:ajax render="outputfield"/>`, the `<tc:out id="outputfield" .../>` 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.