tags: Vaadin
1
Common
- 官方元件未必提供本地化時間格式的功能
- 元件可能只有初始化那一次有套用本地化的時間格式，但之後都沒有套用
DatePicker
- 這個元件的本身的月曆做i18n沒有問題，參考官方範例即可
- 此元件有提供setLocale的方法，但仍不敷使用
- 理由1：若使用zh-TW，則pattern為
yyyy/M/d，參考ShortDatePattern - 理由2：若需求為
yyyy/MM/dd或MM/dd，則無法使用此方法滿足需求
- 理由1：若使用zh-TW，則pattern為
- 時間格式無法自定義，須改用Enhanced DatePicker
Enhanced DatePicker
- Vaadin官方自己出的Addon，就是為了解決DatePicker時間格式無法設定的問題
- 設定月曆的i18n，同DatePicker
EnhancedDatePicker datePicker;
datePicker.setPattern("MM/dd");
Bug說明
- 但這個setPattern僅作用一次，後續可能會變回預設
- 建議在event中，每次重複使用此元件時都要setPattern，以確保時間格式不會跑掉
// 避免pattern錯誤
component.addListener(e -> {
startDatePicker.setPattern("MM/dd");
endDatePicker.setPattern("MM/dd");
});
Result
TimePicker
- link
- 若未設定Vaadin的Locale，則Vaadin預設會去找作業系統的語系
- 作業系統的語系 O
- 瀏覽器的語系 X
- 使用者的語系 X
Bug說明
- 但這個setLocale僅作用一次(初始化時)，後續可能會變回預設或其他格式(HH:mm)
- 狀況說明：格式會從上午12:00，變成12:00
- 建議在event中，每次重複使用此元件時都要setLocale，以確保時間格式不會跑掉
// 避免pattern錯誤
component.addListener(e -> {
startTimePicker.setLocale(Locale.TAIWAN);
endTimePicker.setLocale(Locale.TAIWAN);
});
Result
DateTimePicker
- link
- 改善方式，參考上述DatePicker及TimePicker
DateRangePicker
起訖時間 Addon
- https://vaadin.com/directory/component/daterange-picker
- 推薦使用：https://vaadin.com/directory/component/daterangepicker-for-vaadin
Improvement說明
withFormatLocale(Locale.TAIWAN);，並未套用至DatePicker- 解決辦法
- 先避免元件取到作業系統的語系
- 將元件語系設定至DatePicker
DateRangePicker.java #241
@Override
protected void onAttach(final AttachEvent attachEvent) {
// 取得作業系統的語系，可能與系統不同
//this.setLocaleFromClient();
this.updateFromModel(true);
this.addClickOutsideListener();
}
DateRangePickerOverlay.java #262
public void setModel(final DateRangeModel<D> model)
{
final DateRangeModel<D> oldValue = this.currentModel;
this.currentModel = model;
this.updateComponentsFromModel(this.currentModel);
this.fireValueChanged(oldValue, false);
this.dpStart.setLocale(dateRangePicker.getFormatLocale());
this.dpEnd.setLocale(dateRangePicker.getFormatLocale());
}
Result
沒有留言:
張貼留言