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>