Datepicker fails to show when multiple datepickers are in one view.ui.xml and the language is set to NL (Dutch)

[pslinger]

I have a view with two datepicker ui:fields, both with language set to 'NL'. On runtime, the datepicker on the second field fails to show when the field gains focus. However when the tab-key is used to navigate between fields, de datepicker popup is shown correctly.

<m:MaterialDatePicker grid="s6" ui:field="in" format="dd-mm-yyyy"
   autoClose="true" detectOrientation="true" language="NL"
  placeholder="In functie vanaf" selectionType="YEAR" yearsToDisplay="20" />
<m:MaterialDatePicker grid="s6"  ui:field="uit" format="dd-mm-yyyy"
   autoClose="true" detectOrientation="true" language="NL"
  placeholder="In functie t/m" selectionType="YEAR" yearsToDisplay="20" />

[rodrigobastosv]

I can confirm this bug. I solved it by adding ClickHandler that opens the MaterialDatePicker

[kevzlou7979]

@rodrigobastosv Can you share your solution for this, I will try also to figure what's happening on this.

[rodrigobastosv]

Sure! In the ui.xml i set the language only in the first MaterialDatePicker

<m:MaterialColumn grid="s12 m12 l4">
           <m:MaterialDatePicker ui:field="dtInicial"
	                                       placeholder="{labels.dataInicial}"
				    	       detectOrientation="true"
				    	       autoClose="true"
				    	       selectionType="YEAR"
				    	       yearsToDisplay="10"
				    	       language="PT_br"/>
	</m:MaterialColumn>
<m:MaterialColumn grid="s12 m12 l4">
	<m:MaterialDatePicker ui:field="dtFinal"
				    	    placeholder="{labels.dataFinal}"
				    	    detectOrientation="true"
				    	    autoClose="true"
				    	    selectionType="YEAR"
				    	    yearsToDisplay="10"/>
	</m:MaterialColumn>

And in the java i add the above clickHandler:

dtInicial.addClickHandler(handler -> dtInicial.open());

[kevzlou7979]

I can't reproduce this with version 2.0.1 and 2.1, May I know what version of GMD you are using? If you have a lower version then you need to update also we've did recent of changes on DatePicker initialization so that might solved the problem.

[kevzlou7979]

[rodrigobastosv]

I'm using 2.0.1 I'll test again when the 2.1 comes up.

[kevzlou7979]

You can test it using the 2.1-SNAPSHOT.

[moschkom]

I can confirm this issue. We moved from 2.0-rc5 to 2.0.1. In 2.0-rc5 the date pickers were working as expected. In 2.0.1 one of our two date pickers does not open.

It somehow is connected to the language of the date picker. If I remove the language definition both date pickers work again.

[rodrigobastosv]

I took some time to test this more and i figured it out that the 2 datepickers only not work together when they are in the same MaterialRow.

The code above fails: <m:MaterialRow> <m:MaterialColumn grid="s12 m12 l6"> <m:MaterialDatePicker detectOrientation="true" autoClose="true" allowBlank="false" selectionType="YEAR" yearsToDisplay="10" language="PT_br"/> </m:MaterialColumn> <m:MaterialColumn grid="s12 m12 l6"> <m:MaterialDatePicker detectOrientation="true" autoClose="true" allowBlank="false" selectionType="YEAR" yearsToDisplay="10"/> </m:MaterialColumn> </m:MaterialRow>

While the code above works perfectly: <m:MaterialRow> <m:MaterialColumn grid="s12 m12 l6"> <m:MaterialDatePicker detectOrientation="true" autoClose="true" allowBlank="false" selectionType="YEAR" yearsToDisplay="10" language="PT_br"/> </m:MaterialColumn> </m:MaterialRow> <m:MaterialRow> <m:MaterialColumn grid="s12 m12 l6"> <m:MaterialDatePicker detectOrientation="true" autoClose="true" allowBlank="false" selectionType="YEAR" yearsToDisplay="10"/> </m:MaterialColumn> </m:MaterialRow>

[GuidoReith]

In Version 2.1-rc1 was the method Datepicker.reinitialize() (see also documentation in https://gwtmaterialdesign.github.io/gwt-material-demo/#pickers). Calling this after setting a language in more than one datepicker makes every datepicker work correctly. But the method is not in Version 2.1. So the error remains.

[KobiKoboldus]

This is my workaround to set languages. Scheduler .get() .scheduleDeferred(new ScheduledCommand() { @Override public void execute() { datePicker.setLanguage(DatePickerLanguage.DE); hDatePicker.setLanguage(DatePickerLanguage.DE); } });

[GuidoReith]

Bug is still not fixed in version 2.3.0.