Vaadin Elements - Date Picker - Handling the Value

Handling the Value

The user can select a date by clicking or tapping on it on the dropdown overlay. A date can also be selected with keyboard either by typing the value to the input field or using arrow keys for focusing the desired date on the dropdown overlay and selecting it with space/enter. The selected date is contained in the value property.

Value Property Type and Format

The value property is a string date in the ISO 8601 format ("YYYY-MM-DD") or an empty string when no selection is made. When representing years below 0 or above 9999, the ISO 8601 extended 6-digit year format is used (e.g.: "-000001-01-01" for year -1, "+010000-01-01" for year 10000).

You can set the value programmatically by assigning the value property or by using the value attribute. The attribute format is the same as for the value property.

<vaadin-date-picker value="1999-12-31"></vaadin-date-picker>

Value Changed Event

In order to listen to changes in the value, you can add a value-changed listener to the vaadin-date-picker.

// Log the selected dates to console.
// Example output: "Selected: 2016-02-14"
datePicker.addEventListener('value-changed', function() {
  console.log('Selected: ' + datePicker.value);
});

Limit the Selectable Values

With the min and max properties you can limit the range of selectable dates. Format of the properties are the same as the value property’s format.

You can limit the range programmatically by assigning the min and max properties or by using the min and max attributes.

<vaadin-date-picker min="2000-01-01" max="2000-12-31"></vaadin-date-picker>