---
title: Handling the Value
order: 2
layout: page
---

[[vaadin-date-picker.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 [propertyname]#value# property.

== Value Property Type and Format

The [propertyname]#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 [propertyname]#value# property or by using the [propertyname]#value# attribute.
The attribute format is the same as for the [propertyname]#value# property.

[source,html]
----
<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 [vaadinelement]#vaadin-date-picker#.

[source,javascript]
----
// 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 [propertyname]#min# and [propertyname]#max# properties you can limit the range of selectable dates.
Format of the properties are the same as the [propertyname]#value# property's format.

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

[source,html]
----
<vaadin-date-picker min="2000-01-01" max="2000-12-31"></vaadin-date-picker>
----
