GWTBootstrap - Masking Datepicker - datepicker

Question

Requirement : Mask the datepicker on blur / form submit.
I was able to get the masking done onBlur with forceparse set to false but i'm unable to navigate to the next month/year in the datepicker maybe because i'm overriding the DOM handlers.
dob.setForceParse(false);
dob.addDomHandler(new BlurHandler() {
#Override
public void onBlur(BlurEvent event) {
dob.getTextBox().setText(**masked value**);
}
}, BlurEvent.getType());
dob.addDomHandler(new FocusHandler() {
#Override
public void onFocus(FocusEvent event) {
dob.setValue(**unmasked value**);
}
}, FocusEvent.getType());
I am unable to use ChangeDateHandler, since it automatically assumes "1/1/19" as "1/1/1900" and masks the text mid-way of text enter. Is there any other way i can handle this?

Answer 1

If you are having problems with DatePicker's TextBox you can just hide it and use any other Widget instead.
TextBox is basically used to show the DatePicker when is focused, to show selected date and to enter the date manually.
Here is an example code how to use your own TextBox with DatePicker (I use VerticalPanel to show DatePicker just below the TextBox):
VerticalPanel container = new VerticalPanel();
final DatePicker dob = new DatePicker();
// hide DatePicker's TextBox
dob.getTextBox().getElement().getStyle().setDisplay(Display.NONE);
final TextBox box = new TextBox();
box.addFocusHandler(new FocusHandler() {
#Override
public void onFocus(FocusEvent event) {
dob.show();
box.setText("**unmasked value**");
}
});
dob.addHideHandler(new HideHandler() {
#Override
public void onHide(HideEvent hideEvent) {
box.setText("**masked value**");
}
});
dob.addChangeDateHandler(new ChangeDateHandler() {
#Override
public void onChangeDate(ChangeDateEvent evt) {
Window.alert("ChangeDateEvent");
}
});
container.add(box);
container.add(dob);
Just notice, that you need to call dob.show() when TextBox is focused. I also use DatePicker's HideHandler instead of TextBox's BlurHandler to show masked value but you may change it as you wish.
If you want to change the way of parsing dates like "1/1/19", now you can add your own parser to the TextBox.