datePicker

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

  • XML element: datePicker

  • Java class: TypedDatePicker

Basics

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 users to quickly select a year by clicking it in the right pane. Users can also quickly go back to today’s date by clicking Today the bottom.

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

The default type is localDate. To change the type, use the datatype attribute.

Attributes

id - autoOpen - classNames - clearButtonVisible - colspan - dataContainer - datatype - enabled - errorMessage - height - invalid - label - maxHeight - maxWidth - minHeight - minWidth - name - opened - placeholder - property - readOnly - required - requiredIndicatorVisible - requiredMessage - tabIndex - themeNames - visible - width

autoOpen

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 or the field.

name

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

opened

Specifies whether the calendar is opened.

Handlers

AttachEvent - BlurEvent - ChangeEvent - ClientValidatedEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - InvalidChangeEvent - OpenedChangeEvent - TypedValueChangeEvent - statusChangeHandler - validator

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

ChangeEvent

com.vaadin.flow.component.datepicker.GeneratedVaadinDatePicker.ChangeEvent corresponds to the change DOM event.

ClientValidatedEvent

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

InvalidChangeEvent

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

OpenedChangeEvent

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

validator

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

@Install(to = "datePicker", subject = "validator")
private void datePickerValidator(LocalDate value) {
    LocalDate today = LocalDate.now();
    if (value != null && today.isAfter(value)) {
        throw new ValidationException("The date must be today or later.");
    }
}

Elements

tooltip

See Also

See Vaadin Docs for more information.