You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Week Numbers · Vaadin
Vaadin Elements - Date Picker - Week Numbers

Week Numbers

Weeks are numerated based on the ISO-8601 standard, so the first week of the year contains 4th of January. And they are numerated starting on Mondays, hence, the date picker only shows week numbers if the first day of the week is set appropriately.

<vaadin-date-picker show-week-numbers></vaadin-date-picker>
<script>
  document.querySelector('vaadin-date-picker').set('i18n.firstDayOfWeek', 1);
</script>

Customizing the Input Field

The vaadin-date-picker element allows you to customize the default input field by using CSS mixins. If that’s not enough, you can also replace the whole input field by using the vaadin-date-picker-light element.

Replacing the Input

The vaadin-date-picker-light element is a light version of the full vaadin-date-picker, and it provides only the dropdown functionality.

The custom input element must have a property for the value, which is available for two-way data-binding. By default it is expected that this property is named bindValue to make it compatible with iron-input. You can change the property name with the attrForValue property.

In order to create a simple iron-input-based date-picker, you can just wrap the input inside the element.

<vaadin-date-picker-light>
  <input is="iron-input">
</vaadin-date-picker-light>