datepicker is giving error and cannot set to fr (french)

Flow
1

When I use the datepicker, it’s working and can see it on my page.
when I click on it, it gives an error.
I’m trying to set it up with fr language by passing i18n attribute.
I’m using Angular 8
if I don’t add the [i18n]
attribute on the html and add it in the javascript code, then I don’t get an error and the date picker come up, but the french translation for today is not change, I’ve look at the developer tools console(chrome) and it shows my change for the i18n attribute.

*** the .ts for changing the today:
ngOnInit() {
const datePicker = document.querySelector(“vaadin-date-picker”);
datePicker.setAttribute(‘label’,‘Finnish date picker’); // works
datePicker.setAttribute(‘i18n.today’, ‘today(fr)’); // works, but on the webpage it still shows english!!!

Any help would really be appreciated.

zone-evergreen.js.pre-build-optimizer.js:138 Uncaught TypeError: t is not a function
at HTMLElement._formatDisplayed (vaadin-date-picker-overlay-content.js.pre-build-optimizer.js:442)
at vu (property-effects.js.pre-build-optimizer.js:825)
at Function._evaluateBinding (property-effects.js.pre-build-optimizer.js:2816)
at Object.mu [as fn]
(property-effects.js.pre-build-optimizer.js:580)
at iu (property-effects.js.pre-build-optimizer.js:157)
at su (property-effects.js.pre-build-optimizer.js:121)
at HTMLElement._propagatePropertyChanges (property-effects.js.pre-build-optimizer.js:1739)
at HTMLElement._propertiesChanged (property-effects.js.pre-build-optimizer.js:1702)
at HTMLElement._flushProperties (properties-changed.js.pre-build-optimizer.js:360)
at HTMLElement._flushProperties (property-effects.js.pre-build-optimizer.js:1552)
_formatDisplayed @ vaadin-date-picker-overlay-content.js.pre-build-optimizer.js:442
vu @ property-effects.js.pre-build-optimizer.js:825
_evaluateBinding @ property-effects.js.pre-build-optimizer.js:2816
mu @ property-effects.js.pre-build-optimizer.js:580
iu @ property-effects.js.pre-build-optimizer.js:157
su @ property-effects.js.pre-build-optimizer.js:121
_propagatePropertyChanges @ property-effects.js.pre-build-optimizer.js:1739
_propertiesChanged @ property-effects.js.pre-build-optimizer.js:1702
_flushProperties @ properties-changed.js.pre-build-optimizer.js:360
_flushProperties @ property-effects.js.pre-build-optimizer.js:1552
ready @ property-effects.js.pre-build-optimizer.js:1660
ready @ element-mixin.js.pre-build-optimizer.js:650
ready @ vaadin-date-picker-overlay-content.js.pre-build-optimizer.js:295
_enableProperties @ properties-changed.js.pre-build-optimizer.js:339
__enableOrFlushClients @ property-effects.js.pre-build-optimizer.js:1596
_readyClients @ property-effects.js.pre-build-optimizer.js:1614
_flushClients @ property-effects.js.pre-build-optimizer.js:1567
_propertiesChanged @ property-effects.js.pre-build-optimizer.js:1704
_flushProperties @ properties-changed.js.pre-build-optimizer.js:360
_flushProperties @ property-effects.js.pre-build-optimizer.js:1552
ready @ property-effects.js.pre-build-optimizer.js:1660
_enableProperties @ properties-changed.js.pre-build-optimizer.js:339
Pd @ templatize.js.pre-build-optimizer.js:139
s @ templatize.js.pre-build-optimizer.js:364
i @ templatize.js.pre-build-optimizer.js:572
_stampOverlayTemplate @ vaadin-overlay.js.pre-build-optimizer.js:784
_templateOrRendererChanged @ vaadin-overlay.js.pre-build-optimizer.js:881
vu @ property-effects.js.pre-build-optimizer.js:825
iu @ property-effects.js.pre-build-optimizer.js:157
su @ property-effects.js.pre-build-optimizer.js:121
_propertiesChanged @ property-effects.js.pre-build-optimizer.js:1708
_flushProperties @ properties-changed.js.pre-build-optimizer.js:360
_flushProperties @ property-effects.js.pre-build-optimizer.js:1552
ready @ property-effects.js.pre-build-optimizer.js:1660
ready @ element-mixin.js.pre-build-optimizer.js:650
ready @ vaadin-overlay.js.pre-build-optimizer.js:392
_enableProperties @ properties-changed.js.pre-build-optimizer.js:339
_enableProperties @ disable-upgrade-mixin.js.pre-build-optimizer.js:110
connectedCallback @ properties-mixin.js.pre-build-optimizer.js:222
connectedCallback @ element-mixin.js.pre-build-optimizer.js:636
connectedCallback @ vaadin-overlay.js.pre-build-optimizer.js:440
invoke @ zone-evergreen.js.pre-build-optimizer.js:359
runGuarded @ zone-evergreen.js.pre-build-optimizer.js:134
(anonymous) @ zone-evergreen.js.pre-build-optimizer.js:118
attributeChangedCallback @ disable-upgrade-mixin.js.pre-build-optimizer.js:79
invoke @ zone-evergreen.js.pre-build-optimizer.js:359
runGuarded @ zone-evergreen.js.pre-build-optimizer.js:134
(anonymous) @ zone-evergreen.js.pre-build-optimizer.js:118
_initOverlay @ vaadin-date-picker-mixin.js.pre-build-optimizer.js:340
_openedChanged @ vaadin-date-picker-mixin.js.pre-build-optimizer.js:453
au @ property-effects.js.pre-build-optimizer.js:212
iu @ property-effects.js.pre-build-optimizer.js:157
su @ property-effects.js.pre-build-optimizer.js:121
_propertiesChanged @ property-effects.js.pre-build-optimizer.js:1708
_flushProperties @ properties-changed.js.pre-build-optimizer.js:360
_flushProperties @ property-effects.js.pre-build-optimizer.js:1552
_invalidateProperties @ property-effects.js.pre-build-optimizer.js:1522
_setProperty @ property-effects.js.pre-build-optimizer.js:1507
Object.defineProperty.set @ properties-changed.js.pre-build-optimizer.js:159
open @ vaadin-date-picker-mixin.js.pre-build-optimizer.js:373
_toggle @ vaadin-date-picker.js.pre-build-optimizer.js:245
(anonymous) @ template-stamp.js.pre-build-optimizer.js:87
invokeTask @ zone-evergreen.js.pre-build-optimizer.js:391
runTask @ zone-evergreen.js.pre-build-optimizer.js:168
invokeTask @ zone-evergreen.js.pre-build-optimizer.js:465
y @ zone-evergreen.js.pre-build-optimizer.js:1603
_ @ zone-evergreen.js.pre-build-optimizer.js:1629
gc @ gestures.js.pre-build-optimizer.js:669
wc @ gestures.js.pre-build-optimizer.js:1065
click @ gestures.js.pre-build-optimizer.js:1024
dc @ gestures.js.pre-build-optimizer.js:457
invokeTask @ zone-evergreen.js.pre-build-optimizer.js:391
runTask @ zone-evergreen.js.pre-build-optimizer.js:168
invokeTask @ zone-evergreen.js.pre-build-optimizer.js:465
y @ zone-evergreen.js.pre-build-optimizer.js:1603
_ @ zone-evergreen.js.pre-build-optimizer.js:1629
Show 46 more frames
zone-evergreen.js.pre-build-optimizer.js:172 Uncaught TypeError: Cannot read property ‘querySelector’ of undefined
at HTMLElement.get _overlayContent [as _overlayContent]
(vaadin-date-picker-mixin.js.pre-build-optimizer.js:869)
at HTMLElement._initOverlay (vaadin-date-picker-mixin.js.pre-build-optimizer.js:345)
at HTMLElement._openedChanged (vaadin-date-picker-mixin.js.pre-build-optimizer.js:453)
at Object.au [as fn]
(property-effects.js.pre-build-optimizer.js:212)
at iu (property-effects.js.pre-build-optimizer.js:157)
at su (property-effects.js.pre-build-optimizer.js:121)
at HTMLElement._propertiesChanged (property-effects.js.pre-build-optimizer.js:1708)
at HTMLElement._flushProperties (properties-changed.js.pre-build-optimizer.js:360)
at HTMLElement._flushProperties (property-effects.js.pre-build-optimizer.js:1552)
at HTMLElement._invalidateProperties (property-effects.js.pre-build-optimizer.js:1522)

package.json

“dependencies”: {
“@vaadin/vaadin-date-picker”: “^4.0.3”,

app.component.ts

import ‘@vaadin/vaadin-date-picker/vaadin-date-picker.js’;

about.component.ts

export class AboutComponent implements OnInit {
i18n = {
week: ‘viikko’,
calendar: ‘kalenteri’,
clear: ‘tyhjennä’,
today: ‘tänään’,
cancel: ‘peruuta’,
firstDayOfWeek: 1,
monthNames:
‘tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu’.split(‘‘),
weekdays: ‘sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai’.split(’’),
weekdaysShort: ‘su_ma_ti_ke_to_pe_la’.split(‘_’)
};

About.component.html

{{ 'about.aboutTitleLabel' | translate }}

{{ 'about.searchLabel' | translate }}
search

<custom-button id=‘customButton’ (click)=“clickedCustomButton($event)” data-mylabel=“{{ ‘about.submitButtonLabel’ | translate }}” alt=“ws_submitLabel” title=“{{ ‘about.submitButtonLabel’ | translate }}” [attr.textvalue]
="‘about.submitButtonLabel’ | translate " fontFamily=‘Muli’ textColor=‘white’ textColorHover=‘black’ customEvent=‘customButtonClickEnter’>

<vaadin-date-picker [i18n]
=“i18n” name=“startDate” id=“startDate” attr-for-value=“value” value=“2019-08-08” (change)=“clickedDate($event)” label=“Start Date” placeholder=“Choose a Start Date”>

2

Have you tried with these changes? https://github.com/vaadin/base-starter-angular/compare/date-picker-localize?expand=1 This example works without any problems

3

Hi,

It’s working now.
I didn’t include the following in the i18n variable - formatDate, formatTitle, parseDate.
So would this make a difference?

also I’m trying to access the properties on the datepicker and it gives me an error in angular typescript.
from this link(https://vaadin.com/components/vaadin-date-picker/html-examples) you have the following:

In my angular typescript file,
ngOnInit() {
// searchMessage
this.subscription = this.data.currentSearchMessage.subscribe(message => this.searchMessage = message);
window.addEventListener(‘customButtonClickEnter’, e => this.handleUpdateCustomButtonClickEnter(e));
customElements.whenDefined(‘vaadin-date-picker’).then(
_=> {
const datePicker = document.querySelector(“vaadin-date-picker”);
datePicker.set(‘i18n.firstDayOfWeek’, 1);
datePicker.setAttribute(‘i18n.firstDayOfWeek’, ‘1’);
}

My question is why can’t I use datePicker.set in my angular typescript (about.component.ts) file?
Seems like it only sees the regular properties like setAttribute, textContent, innerHTML, id…

thanks for help

4

The formatDate, formatTitle, parseDate properties are essential for customizing the i18n of date picker and the component cannot work without them.

My question is why can’t I use datePicker.set in my angular typescript (about.component.ts) file? Seems like it only sees the regular properties like setAttribute, textContent, innerHTML, id…

Could be that the component hasn’t yet been upgraded at the time you’re calling set. Before that, it’s just an empty tag in the DOM without any additional functionality. This is how the base starter ensures web components are ready before bootstrapping the app https://github.com/vaadin/base-starter-angular/blob/master/src/main.ts#L12

Alternatively, to ensure the component is upgraded, you can wrap the set into a customElements.whenDefined('vaadin-date-picker').then(() => datePicker.set...).

5

Property ‘set’ does not exist on type ‘Element’.ts(2339)

this is the message I get in about.component.ts in visual studio code.
seems like it validate during code time and not during run time

ngOnInit() {
customElements.whenDefined(‘vaadin-date-picker’).then(
_=> {
const datePicker = document.querySelector(“vaadin-date-picker”);
datePicker.set() // this gives the error above. .setAttribute is ok
datePicker.setAttribute(‘’,‘’); // no errors

6

fix the error and now have access to datePicker.set()
needed to add <any> otherwise default to element and it just has the regular properties.
ngOnInit() { customElements.whenDefined('vaadin-date-picker').then( _=> { const datePicker = <any>document.querySelector("vaadin-date-picker"); datePicker.set() // this gives the error above. .setAttribute is ok datePicker.setAttribute('',''); // no errors

7

one last thing,

when I tab to the datepicker control, I get a blue border around the control, but when I click on the datepicker, I don’t get the blue border.

Is there a way to have the blue border around the datepicker when I click on the control.

thanks a lot

8

The focus-ring is by default only shown when the field gets focused with keyboard. Overriding that needs an additional style module to show it whenever the inner text-field is focused. Adding the following snippet to your app should do the trick:

<dom-module id="focus-ring-on-focused" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([focused]
) [part~=input-field]
 {
        box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
      }
    </style>
  </template>
</dom-module>
9

I’m trying to do the code to set the input-field but it’s not doing anything.
Do I add the code in the template of my angular app?
I have a template in my project - about.component.html but it complains when I add<dom-module and <template
I have a .scss file for my component, can I enter the css code there?
I’m also trying to change the color from blue to green to match with our theme. how can I do this?

10

it’s working if I put it in the index.html main file.
is it the right place to put it in an angular 8 application?
And how can I change the color blue to green in the datepicker?



<body>
  <dom-module id="focus-ring-on-focused" theme-for="vaadin-text-field">
      <template>
        <style>
          :host([focused]
) [part~=input-field]
 {
            box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
          }
        </style>
      </template>
  </dom-module>
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
11

trying to change the button color to red for example (today text)
it’s not working, anybody can help. thanks

<dom-module id="lumo-button" theme-for="vaadin-button">
      <template>
        <style>
          :host {
            color:red !important;
          }
        </style>
      </template>
  </dom-module>
12

I’ve actually solved it by doing this. is this good and can I put it in a file seperately instead of index.html ?

 <dom-module id="my-lumo-button" theme-for="vaadin-*">
      <template>
        <style>
          :host([focused]
) [part~=input-field]
 {
            box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct) !important;
          }
          [part="date"]
[selected]
::before {
            background-color: #009577 !important;
          }
          [part="date"]
[role="button"]
:not([disabled]
):not([selected]
):hover::before {
            background-color: #009577 !important;
          }
          [part="date"]
[today]
 {
            color: black !important;
            font-weight: bolder !important;
          }
          [part~=today-button]
 {
            color:#009577 !important;
          }
          [part~=cancel-button]
 {
            color:#009577 !important;
          }
          [part="years"]
 [part="year-number"]
[selected]
 {
            color:#009577 !important;
          }
          [part="years"]
 [part~=year-number]
 [selected]
:hover {
            color:#009577 !important;
            font-weight: bolder !important;
          }
        </style>
      </template>
  </dom-module>
13

Yeah index.html is fine. You can also test the newly released JS API https://github.com/vaadin/vaadin-themable-mixin/releases/tag/v1.5.0-alpha1. Note that it’s still alpha.

14

how safe is it to use the datepicker for our company? as anybody can write components, do you verify the code for viruses?
thanks

15

Guaranteeing any code is completely safe is very difficult, if not impossible. But the positive side of having an open-source component is that you can freely [investigate the source code]
(https://github.com/vaadin/vaadin-date-picker) yourself and see for yourself. vaadin-date-picker has the additional benefit of being developed by Vaadin the company. This means that all code contributions are either directly written or reviewed by Vaadin employees.

16

Hi,

My datepicker is working great.
I have the following in index.html in the <body tag.
Is there a way to have it outside of index.html in it’s own file?


<body>
<dom-module id="focus-ring-on-focused" theme-for="vaadin-text-field">
  <template>
    <style>
		...
17

Hello

Currently, the only other way in apps not using HTMLImports is to have external JS files to build that content and then programmatically append them to the document. We’re right now tackling this inconvenience by building a helper tool for it: https://github.com/vaadin/vaadin-themable-mixin#styling-in-javascript Note that the feature is still at alpha so there is a (small) chance of API changes. You can install the helper with npm i @vaadin/vaadin-themable-mixin@1.5.0-alpha2

18

Hi,

My datepicker is working great.
I have the following in index.html in the <body tag.
Is there a way to have it outside of index.html in it’s own file?


<body>
<dom-module id="focus-ring-on-focused" theme-for="vaadin-text-field">
  <template>
    <style>
		...
19

I’ll wait until this is release. thanks
https://github.com/vaadin/vaadin-themable-mixin#styling-in-javascript

20

I have the datepicker working great by itself.
When I add the vaadin-combo-box, I get an error at run time(see below). building the package there’s no error.
In my app.component.ts I have the following:
import ‘@vaadin/vaadin-date-picker’;
import ‘@vaadin/vaadin-combo-box’;

If I comment out the last import(vaadin-combo-box), then the datepicker is working with no errors:
Can anybody help?
thanks

Uncaught DOMException: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “vaadin-text-field” has already been used with this registry
at CustomElementRegistry.G.e. [as define]
(https://dev.prolender.net/donald/polyfills-es2015.a1f8fe5ebdcd4e3eee8b.js:1:99518)
at Module.zUnb (https://dev.prolender.net/donald/main-es2015.acca17f72bab99da131f.js:1967:190)
at f (https://dev.prolender.net/donald/runtime-es2015.858f8dd898b75fe86926.js:1:507)
at Object.0 (https://dev.prolender.net/donald/main-es2015.acca17f72bab99da131f.js:1:5026)
at f (https://dev.prolender.net/donald/runtime-es2015.858f8dd898b75fe86926.js:1:507)
at t (https://dev.prolender.net/donald/runtime-es2015.858f8dd898b75fe86926.js:1:376)
at Array.r [as push]
(https://dev.prolender.net/donald/runtime-es2015.858f8dd898b75fe86926.js:1:248)
at https://dev.prolender.net/donald/main-es2015.acca17f72bab99da131f.js:1:47