datePicker lets users enter a date by typing or select it using a calendar overlay.

  • XML element: datePicker

  • Java class: TypedDatePicker


Unlike a regular input field, datePicker has a calendar button and a calendar overlay. The calendar opens when the user clicks the button or the field itself, or starts entering a date.

date picker

The calendar is scrollable and allows selecting a year in the right pane. Click Today at the bottom to navigate back to the current date.

The following example defines a datePicker with a label:

<datePicker id="datePicker" label="Select date"/>

Data Types

datePicker is a typed component which supports common data types for storing a date:

  • date

  • dateTime

  • localDateTime

  • offsetDateTime

  • localDate

To change the type, use the datatype attribute.

Date Format

The default date and time format in the application is defined by the localized format strings. To use a different format, add your own format strings to the message bundle.

To change the format for a particular component, use its dateFormat attribute.

Date Range

To restrict the input to a specific date range, specify a minimum and maximum value using the max and min attributes. This can also be done in the view controller:

private TypedDatePicker<Comparable> datePicker;

public void onInit(InitEvent event) {


To check values entered into datePicker, you can use a validator in a nested validators element.

The following predefined validators are available for datePicker:

In the example below, we will show a FutureValidator usage:

<datePicker label="Select a future date"



Defines whether an overlay calendar opens when the user starts typing a date.

  • If set to true, an overlay calendar opens both on user input and on clicking the calendar button or the field.

  • If set to false, an overlay calendar opens only on clicking the calendar button.


Specifies the latest date that can be selected. Accepted format is yyyy-MM-dd.


Specifies the earliest date that can be selected. Accepted format is yyyy-MM-dd.


Specifies a name for an HTML element that can be used to reference the component.


Specifies whether the calendar overlay is opened.


Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню CodeGenerate (Alt+Insert / Cmd+N).


ClientValidatedEvent is sent by the web component whenever it is validated on the client-side.


com.vaadin.flow.component.datepicker.DatePicker.InvalidChangeEvent is sent when the value of the invalid attribute of the component changes.


OpenedChangeEvent is sent every time the opened attribute of the component changes. That is, when the calendar is opened or closed.


Adds a validator instance to the component. The validator must throw ValidationException if the value is not valid. For example:

@Install(to = "birthDatePicker", subject = "validator")
private void birthDatePickerValidator(Date date) {
        Date now = timeSource.currentTimestamp();
        if (date != null && DateUtils.addYears(now,-18).compareTo(date) < 0) {
            throw new ValidationException("The age must be over 18 years");


See Also

See Vaadin Docs for more information.