How to set locale to a vaadin flow project ?

jeanchristophe.gueriaud · April 27, 2018, 3:35pm

Hello,

I have a Spring boot project and I would like to set the default locale to french.

Is there a simple solution to set this locale ?

I check in this example https://github.com/vaadin/flow-spring-tutorial/tree/master/src/main/java/org/vaadin/spring/tutorial but the default locale is not set.

(and i have some troubles with the datepicker, I don’t know if it’s related, but datepicker.setLocale() seems not “enough” ).

Thanks,

EDIT (i forgot something I did ):


@SpringComponent
public class CustomVaadinServiceInitListener implements VaadinServiceInitListener, SessionInitListener {

	/** serial VUID */
	private static final long serialVersionUID = 7782078275956323697L;

	@Override
	public void serviceInit(ServiceInitEvent event) {
		
		event.addBootstrapListener(new CustomBootstrapListener());
		
		event.getSource().addSessionInitListener(this);
	}

	
	@Override
	public void sessionInit(SessionInitEvent event) throws ServiceException {
		event.getSession().setLocale(Locale.FRANCE);
	}
}

mgrankvi · April 30, 2018, 8:55am

Have you checked with a break point if the sessionInit is actually called?

I tested the sample quickly with the spring starter and it set it correctly to the UI, DatePicker should get the locale from the UI by default.

Stephane63 · April 30, 2018, 2:59pm

I achieved DatePicker localization at runtime using the DatePickerI18n based on locale. Something like

		if (locale.equals(Locale.FRENCH)) {
			DatePickerI18n datePickerI18n = new DatePickerI18n();
			datePickerI18n.setWeek("Semaine");
			datePickerI18n.setCalendar("Calendrier");
			datePickerI18n.setClear(LangageStringKeys.CLEAR_BUTTON.getTranslated());
			datePickerI18n.setToday("Aujourd'hui");
			datePickerI18n.setCancel(LangageStringKeys.CANCEL.getTranslated());
			datePickerI18n.setWeekdays(Arrays.asList("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"));
			datePickerI18n.setWeekdaysShort(Arrays.asList("Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"));
			datePickerI18n.setMonthNames(Arrays.asList("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août",
					"Septembre", "Octobre", "Novembre", "Décembre"));
			datePicker.setI18n(datePickerI18n);
		}

jeanchristophe.gueriaud · May 7, 2018, 4:31pm

Sorry for this late answer, I don’t have problem with translations but with date format (in french it’s DD/MM/YYYY instead MM/DD/YYYY)
If you choose france locale and set a localeDate (now()) then the display date is 5/7/2018 (instead of 07/05/2018).
If you use Edge (I don’t have problems with Firefox or chrome), and select 31/05/2018 (31st May) then it’s interpreted as Month = 31 and day = 05 (so the selected date is in 2020).

I will open a bug on github (here https://github.com/vaadin/vaadin-date-picker-flow/issues/72 ), if you have a workaround don’t hesitate

Here the code:


@BodySize(height = "100vh", width = "100vw")
@HtmlImport("styles/shared-styles.html")
@Route("datePicker")
@Theme(Lumo.class)
public class DatePickerView extends VerticalLayout {


    private DatePicker datePicker;


    public DatePickerView() {
        datePicker = new DatePicker();
        datePicker.setLocale(Locale.FRANCE);
        datePicker.setValue(LocalDate.now());


        if (datePicker.getLocale().equals(Locale.FRANCE)) {
            DatePicker.DatePickerI18n datePickerI18n = new DatePicker.DatePickerI18n();
            datePickerI18n.setWeek("Semaine");
            datePickerI18n.setCalendar("Calendrier");
            datePickerI18n.setClear("Vider");
            datePickerI18n.setToday("Aujourd'hui");
            datePickerI18n.setCancel("Annuler");
            datePickerI18n.setWeekdays(Arrays.asList("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"));
            datePickerI18n.setWeekdaysShort(Arrays.asList("Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"));
            datePickerI18n.setMonthNames(Arrays.asList("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août",
                    "Septembre", "Octobre", "Novembre", "Décembre"));
            datePicker.setI18n(datePickerI18n);
        }
        add(datePicker);
        setClassName("main-layout");
    }

}

Stephane63 · May 7, 2018, 4:39pm

Vous avez raison. Je viens tout juste réaliser que le format n’est effectivement pas le bon.

I just notice that the format is not correct.

Zhe3 · May 8, 2018, 5:35am

Hi, may i know which version of the platform you are using? a possible way is to update to the newest beta version and https://github.com/vaadin/vaadin-date-picker-flow/issues/57 there was a quick fix related to this (should come with the vaadin-date-picker-flow beta9). If this haven’t fixed your issue, you can leave another comment in the ticket.

jeanchristophe.gueriaud · May 8, 2018, 9:39am

I tested with beta8 and beta9 (10.0.0.beta9). I’ve got the same problem (different than #57 because I cannot reproduce it in Chrome).

I comment the ticket.

jeanchristophe.gueriaud · May 30, 2018, 12:38pm

I tried with the last version of Vaadin and I’ve got the same kind of errors.

Do yo think I’ve got some errors due to update (perhaps I didn’t clear my cache) ?

I’ve commented a closed ticket: https://github.com/vaadin/vaadin-date-picker-flow/issues/72

And a code to reproduce some weird errors.
I want to display 6th May → 06/05/2018 in french and 30th May → 30/05/2018
And I’ve got 05/06/2018 selected as 05th June (format correct but display date != java date) and 5/30/2018 selected as 30 May (wrong format but display date = Java date)


@BodySize(height = "100vh", width = "100vw")
@HtmlImport("styles/shared-styles.html")
@Route("date")
@Theme(Lumo.class)
public class DatePickerView extends VerticalLayout {

    private DatePicker dateDialog = new DatePicker("date Dialog");
    private DatePicker dateDialogToday = new DatePicker("date Dialog Today");

    public DatePickerView() {
        LocalDate date30May = LocalDate.of(2018, Month.MAY, 30);
        LocalDate date06May = LocalDate.of(2018, Month.MAY, 6);

        dateDialog.setLocale(Locale.FRANCE);
        dateDialog.setValue(date06May);


        dateDialogToday.setLocale(Locale.FRANCE);
        dateDialogToday.setValue(date30May);

        add(dateDialog,dateDialogToday);




        setClassName("main-layout");
    }

}

Zhe3 · May 30, 2018, 12:51pm

Hi, i have tried the code you provided, but i cannot reproduce the issue.
By the way, with the new version of platform, you don’t need to use the annotation @bodysize and @Theme on your UI, if you want to keep the current behavior.

Could you check your dependency tree on which version you are using with date-Picker?
i have also commented your post in the ticket.

BR

Zhe

jeanchristophe.gueriaud · May 30, 2018, 12:52pm

Perhaps it’s easier to reproduce with the entire project: https://github.com/jcgueriaud/test

jeanchristophe.gueriaud · May 30, 2018, 12:54pm

When i run it (mvn jetty:run), I’ve got this:

[INFO]
Started o.e.j.m.p.JettyWebAppContext@2121d1f9{/,[file:///home/jcgueriaud/dev_java/test/src/main/webapp/, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-date-picker/3.0.1/vaadin-date-picker-3.0.1.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-text-field/2.0.1/vaadin-text-field-2.0.1.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-notification/1.0.0/vaadin-notification-1.0.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-progress-bar/1.0.0/vaadin-progress-bar-1.0.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-form-layout/2.0.0/vaadin-form-layout-2.0.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-upload/4.0.0/vaadin-upload-4.0.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-ordered-layout/1.0.2/vaadin-ordered-layout-1.0.2.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-checkbox/2.1.0/vaadin-checkbox-2.1.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-a11y-announcer/2.1.0/iron-a11y-announcer-2.1.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/com/vaadin/flow-data/1.0.0.beta12/flow-data-1.0.0.beta12.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-split-layout/4.0.0/vaadin-split-layout-4.0.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-meta/2.1.1/iron-meta-2.1.1.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/webcomponents/webcomponentsjs/1.2.0/webcomponentsjs-1.2.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-icon/2.1.0/iron-icon-2.1.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-usage-statistics/1.0.8/vaadin-usage-statistics-1.0.8.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-iconset-svg/2.2.1/iron-iconset-svg-2.2.1.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-grid/5.0.4/vaadin-grid-5.0.4.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-item/2.0.0/vaadin-item-2.0.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymer/polymer/2.6.0/polymer-2.6.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-list-mixin/2.0.0/vaadin-list-mixin-2.0.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-tabs/2.0.0/vaadin-tabs-2.0.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-overlay/3.0.3/vaadin-overlay-3.0.3.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-a11y-keys-behavior/2.1.0/iron-a11y-keys-behavior-2.1.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-themable-mixin/1.1.6/vaadin-themable-mixin-1.1.6.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-development-mode-detector/1.0.3/vaadin-development-mode-detector-1.0.3.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-button/2.0.1/vaadin-button-2.0.1.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/webcomponents/shadycss/1.1.3/shadycss-1.1.3.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-list-box/1.0.2/vaadin-list-box-1.0.2.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-media-query/2.1.0/iron-media-query-2.1.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-icons/4.1.4/vaadin-icons-4.1.4.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-list/2.0.12/iron-list-2.0.12.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-element-mixin/1.0.2/vaadin-element-mixin-1.0.2.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/com/vaadin/vaadin-grid-flow/1.0.0.beta14/vaadin-grid-flow-1.0.0.beta14.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-scroll-target-behavior/2.1.0/iron-scroll-target-behavior-2.1.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-control-state-mixin/2.0.3/vaadin-control-state-mixin-2.0.3.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-dialog/2.0.2/vaadin-dialog-2.0.2.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/com/vaadin/vaadin-text-field-flow/1.0.0.beta10/vaadin-text-field-flow-1.0.0.beta10.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-flex-layout/2.0.3/iron-flex-layout-2.0.3.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/com/vaadin/vaadin-iron-list-flow/1.0.0.beta8/vaadin-iron-list-flow-1.0.0.beta8.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-combo-box/4.0.1/vaadin-combo-box-4.0.1.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-resizable-behavior/2.1.0/iron-resizable-behavior-2.1.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/com/vaadin/flow-push/1.0.0.beta12/flow-push-1.0.0.beta12.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-radio-button/1.0.1/vaadin-radio-button-1.0.1.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/com/vaadin/flow-client/1.0.0.beta12/flow-client-1.0.0.beta12.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/vaadin/vaadin-lumo-styles/1.0.0/vaadin-lumo-styles-1.0.0.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/com/vaadin/vaadin-date-picker-flow/1.0.0.beta14/vaadin-date-picker-flow-1.0.0.beta14.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-fit-behavior/2.1.1/iron-fit-behavior-2.1.1.jar!/META-INF/resources, jar:file:///home/jcgueriaud/.m2/repository/org/webjars/bowergithub/polymerelements/iron-overlay-behavior/2.3.3/iron-overlay-behavior-2.3.3.jar!/META-INF/resources]
,AVAILABLE}{file:///home/jcgueriaud/dev_java/test/src/main/webapp/}

Zhe3 · May 30, 2018, 12:58pm

with the github code you have provided, i have got the following. Isn’t this what you want?

jeanchristophe.gueriaud · May 30, 2018, 1:10pm

I want this (your screenshot) but I’ve got this (see my screenshot).

I’ve just clone my project in a new folder, remove my maven folder, download everything and I’ve got the same error.

I don’t understand the problem.

Zhe3 · May 30, 2018, 1:12pm

which browser did you use?
I have tested with
chrome 66.0.3359.181
firefox 60.0.1
Edge 42.17134
and works just fine

jeanchristophe.gueriaud · May 30, 2018, 1:17pm

I tried on ubuntu with chromium and firefox, on Windows 10 with chrome,Edge and firefox and with chrome on android

EDIT: Firefox 60.0.1 on ubuntu and windows 10

Zhe3 · May 30, 2018, 1:49pm

Hi,

I have tested with three different machines with different OS, different locale settings with machine, and different locales in browser, we all got the correct results.

Zhe

jeanchristophe.gueriaud · May 30, 2018, 3:05pm

I’ve just tried on a Windows 7 computer with no java.
I installed JDK, Maven and compile the project. I have the same error.

I update the project and run it on heroku.

https://date-tester-vaadin10.herokuapp.com/date

It’s working.

I don’t understand why it’s not working but it’s not a problem of browser. (or vaadin I think)

If I find a solution (or the problem), I will reply here.

jeanchristophe.gueriaud · May 30, 2018, 3:41pm

I’ve got a difference in dateConnector.js (same source line 90).

let targetLocaleDate = cleanString(new Date(sample).toLocaleDateString(oldLocale).toString());

On heroku, the oldLocale = en-US.

So the targetLocaleDate = 12/31/2009

On my computer, the oldLocale = fr-LU

So the targetLocaleDate = 31/12/2009

Inside generated html I’ve got this:
For heroku

<!doctype html><html lang="en">

On my computer

<!doctype html><html lang="fr">

I don’t know if I forget to set a locale or something else.

I hope this can help you

jeanchristophe.gueriaud · May 30, 2018, 4:00pm

Here a test case to reproduce the problem.
If you update the project (I’ve change the project to run it inside heroku).

You can launch:

mvn package
java -Duser.language=en -jar target/dependency/jetty-runner.jar target/*.war

It should be ok.

mvn package
java -Duser.language=fr -jar target/dependency/jetty-runner.jar target/*.war

It should be wrong.

mgrankvi · May 31, 2018, 5:15am

This is a problem with our initial parsing of the date format using the wrong locale.
I created an issue for this https://github.com/vaadin/vaadin-date-picker-flow/issues/84 and will look into this.

Mikael