Date

A date can have a label. To get a label use the label attribute.

<tc:date label="Date" value="#{dateController.sputnikLd}"/> Date

Read Only

Disabled

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"/> Date (focus)

For advanced business application users, browser-based date-picker might be too slow to use, because they are used to typing fast.

In this demo is a script file demo-date.ts to show a second input field for shortcuts. Just type e.g. 0212 for December, 2nd in the current year. The next input field will be filled automatically and the date-picker can be used. This is activated by

<tc:dataAttribute name="quick-pattern" value="ddmm"/>

This script is just a showcase. A real application may use specially adjusted shortcuts. E.g. using also a 2-digit year or creating the special quick input field by a keyboard shortcut, or button.

Quick

If the users typing the <TAB> key to jump to the next field, it might be helpful to set tabIndex="-1" to skip the normal date field. Skip Tab

New! It is NOT recommended to use <f:convertDateTime>, in most cases the converter will be configured automatically.

The value must be one of a set of several types. There are some new classes from JEP 150 since Java 8, which are generally preferred to use (there are several discussions in the net).

• java.time.LocalDate
• java.time.LocalDateTime
• java.time.LocalTime
• java.util.Date (not recommended)
• java.lang.String for plain text (TBD)

Technical hint: Until Tobago 4 the user readable localized formatted String (e.g. 12/31/2050) was rendered into the HTML file and was post back to the server. New! Since Tobago 5 the string will be transferred as ISO 8601 (e.g. 2050-12-31) to satisfy the HTML5 specification for input type="date", type="time" and type="datetime-local".

LocalDate

LocalDateTime

LocalTime

Time Zone

Date (as date)

Date (as time)

Long

String

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 error message.

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

Submit

A Java date can also be displayed in other components. Please use an appropriate converter.

Input

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

Text Area

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

Output

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

Label

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

Styles can be set with the attributes dateStyle and timeStyle. Possible values are 'short', 'medium', 'long' and 'full'. It does not work with <tc:date/>, so here we use an output field.

Short style6/5/25, 8:05 PM Medium StyleJun 5, 2025, 8:05:49 PM Long StyleJune 5, 2025 at 8:05:49 PM UTC Full StyleThursday, June 5, 2025 at 8:05:49 PM Coordinated Universal Time

To define the earliest or latest acceptable date, the attributes min and max can be used. The range in this example is from Jun 8, 2025 to Jun 15, 2025.

Party

The size can be changed with markup large or small.

To define the earliest or latest acceptable date, the attributes min and max can be used.

Now Button

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.

Input

Output2016-05-22 Submit

Attention: Using AJAX on change of date is currently problematic. In some cases, e.g. changing the last field, the change event will be fired (at the first key you've typed) and the cursor will lose its position.

---

The output field 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.

On Change

On Server