setZoneId for DatePicher on vaadin 14

Flow
1

Hi, is it possible to set the zone id for DatePicker component in vaadin 14 like in vaadin 8 ?

is there some documentation ?

Thanks

2

Giovanni Adobati:
Hi, is it possible to set the zone id for DatePicker component in vaadin 14 like in vaadin 8 ?

is there some documentation ?

Thanks

No one can help / comment ?

Thanks

3

Looks like there is no such method.

4

Olli Tietäväinen:
Looks like there is no such method.

Hi Olli,

Thanks for the answer , so, how to manage the Time zone in an aplication that store the date in UTC into the database, but want to prompt the date in the User Time Zone ?

Can you address me to the vaadin 14 documentation ?

or have i to convert the date in the proper TimeZone before to prompt it ?

Thanks

5

or have i to convert the date in the proper TimeZone before to prompt it ?

Yes, I would say so. The DatePicker uses LocalDate as the data type, so it is inherently timezoneless.

6

I stood before the same problem (Date vs. LocalDate) and solved this with a custom field.
It’s for Germany, so you may have to adjust the constants accordingly.

import java.text.DateFormatSymbols;
import java.time.LocalDate;
import java.time.LocalTime;
import java.time.ZoneId;
import java.util.Arrays;
import java.util.Date;
import java.util.Locale;

import com.vaadin.flow.component.AbstractCompositeField;
import com.vaadin.flow.component.datepicker.DatePicker;
import com.vaadin.flow.component.datepicker.DatePicker.DatePickerI18n;

public class DateField extends AbstractCompositeField<DatePicker,DateField,Date>
{
	private static final long serialVersionUID = 1L;
	
	private static final ZoneId DEFAULT_ZONE = ZoneId.of( "Europe/Berlin" );
	private static final DateFormatSymbols SYMBOLS=new DateFormatSymbols(Locale.GERMANY);
	
	protected DatePicker delegate;
	protected boolean startOfDay=true;

	public DateField()
	{
		super(null);
		delegate=new DatePicker();
		delegate.setLocale(Locale.GERMANY);
		delegate.setI18n(initI18n());
		delegate.addValueChangeListener(e->setModelValue(convert(e.getValue()), true));
	}

	public DateField(boolean startOfDay)
	{
		this();
		setStartOfDay(startOfDay);
	}
	
	@Override
	protected DatePicker initContent()
	{
		return delegate;
	}

	@Override
	protected void setPresentationValue(Date newPresentationValue)
	{
		delegate.setValue(convert(newPresentationValue));
	}
	
	@Override
	public Date getValue()
	{
		return convert(delegate.getValue());
	}
	
	@Override
	public void setValue(Date value)
	{
		delegate.setValue(convert(value));
		super.setValue(value);
	}

	
	protected LocalDate convert(Date date)
	{
		if(date==null) 
			return null;
		else if(date instanceof java.sql.Date)
			return ((java.sql.Date) date).toLocalDate();
		else
			return date.toInstant().atZone(DEFAULT_ZONE).toLocalDate();
	}
	
	protected Date convert(LocalDate date)
	{
		return convert(date, startOfDay);
	}
	
	public static Date convert(LocalDate date, boolean startOfDay)
	{
		if(date==null) return null;
		else if(startOfDay)
			return Date.from(date.atStartOfDay(DEFAULT_ZONE).toInstant());
		else
			return Date.from(date.atTime(LocalTime.MAX).atZone(DEFAULT_ZONE).toInstant());
	}

	public boolean isStartOfDay()
	{
		return startOfDay;
	}

	public void setStartOfDay(boolean startOfDay)
	{
		this.startOfDay = startOfDay;
	}
	
	protected DatePickerI18n initI18n()
	{
		DatePickerI18n i18n=new DatePickerI18n();
		
		i18n.setCalendar("Kalender");
		i18n.setCancel("Abbrechen");
		i18n.setClear("Löschen");
		i18n.setToday("Heute");
		i18n.setWeek("Woche");
		
		i18n.setFirstDayOfWeek(1);
		
		i18n.setMonthNames(Arrays.asList(SYMBOLS.getMonths()));
		i18n.setWeekdays(Arrays.asList(SYMBOLS.getWeekdays()).subList(1, 8));
		i18n.setWeekdaysShort(Arrays.asList(SYMBOLS.getShortWeekdays()).subList(1, 8));
		
		return i18n;
	}
}