DatePicker format bug when choosing day above 12 with polish locale

[pleku]

@tomivirkki commented on Fri Apr 06 2018

From @lolytxd on April 5, 2018 13:37

Vaadin version: 10.0.0.beta5

Description

When I choose days from 1-12 date format is MM.dd.yyyy, but when i choose day above 12, eg. 13, then the date format is switching to dd.MM.yyyy and the component shows error, because it takes 13 as month.

Actual outcome

Outcome, when i choose 12th of April from date picker:

Then when I click calendar icon:

Outcome, when i choose 13th of April from date picker:

Then when I click calendar icon:

When I manually write 4.13.2018 into input field and click enter, the date switches to 13.04.2018 and component shows error too, but when i write 4.13.2018 and then click somewhere on site, the date switches to 13.04.2018 but component doesn't show error.

Steps to reproduce

For this example I used project from https://vaadin.com/start/v10-project-base and I changed vaadin-version in pom.xml <vaadin.version>10.0.0.beta5</vaadin.version>

I changed MainView class like this:

@BodySize(height = "100vh", width = "100vw")
@HtmlImport("styles/shared-styles.html")
@Route("")
@Theme(Lumo.class)
@Push(transport = Transport.LONG_POLLING)
public class MainView extends VerticalLayout {

	public MainView() {
		DatePicker datePicker = datePicker("Data");
		datePicker.setLocale(new Locale("pl", "PL"));
		add(datePicker);
	}

	private DatePicker datePicker(String caption) {
		DatePicker datePicker = new DatePicker(caption);
		datePicker.getElement().getStyle().set("--lumo-space-m", "0px");
		datePicker.setI18n(new DatePickerI18n().setWeek("tydzień")
				.setCalendar("kalendarz").setClear("wyczyść")
				.setToday("dziś").setCancel("anuluj").setFirstDayOfWeek(1)
				.setMonthNames(Arrays.asList("styczeń", "luty", "marzec",
						"kwiecień", "maj", "czerwiec", "lipiec", "sierpień",
						"wrzesień", "październik", "listopad", "grudzień"))
				.setWeekdays(Arrays.asList("poniedziałek", "wtorek", "środa",
						"czwartek", "piątek", "sobota", "niedziela"))
				.setWeekdaysShort(Arrays.asList("niedz", "pon", "wt", "śr", "czw", "pt",
						"son")));
		datePicker.setWidth("calc(50% - .25rem)");
		return datePicker;
	}
}

Browsers Affected

• Chrome 65.0.3325.181 x64
• Firefox
• Safari
• Edge
• IE 11
• iOS Safari
• Android Chrome

Copied from original issue: vaadin/vaadin-date-picker#530

[ZheSun88]

as i can see from the format of the date, it is using . as a separator, which is not support by the current DatePicker implementation (only support / as separator), so the format of datepicker will be changed to use default US locale.
Javadoc of the setLocale()

NOTE:Supported formats are MM/DD/YYYY, DD/MM/YYYY and YYYY/MM/DD.

I guess, the same reason for #56 , #55

[anasmi]

Also this issue is reported into framework repo. The use case is German locale:

Hi,

i just attended the Vaadin 10 Training on Data Binding and Forms.
It turned out during the exercise that in the DatePicker 
there is obviously a problem with my Locale (Germany) and the Day and Month.
If i pick a day after the 12th, it gives an error. 
(probably because it tries to interpret the day as a month).

The problem also exists in the training solution
 (due to it's license I am not allowed to attach it here.
 But i guess you have access to it in any Vaadin company directory)

Vaadin Version: 10.0.0.beta7

Instructions for reconstructing the problem:

Locale Scheme to Germany
Start the Solution with jetty:run
Pick a new date with a day > 12th (e.g. 13. April 2018)
Regards,
Michael

[ZheSun88]

I just pushed a change to the datePicker Connector. This bug should be fixed in the next release

[jcgueriaud]

I've tried with vaadin 10.0.0.beta9 and I've got problems related to date formatting.

Here my opened ticket with code and steps to reproduce. #72

[ZheSun88]

This issue has been fixed by #76, will come with next component release (1.0.0.beta14)