Getting the default DateBox() picker to advance year at a time

[Rob Tanner]

Hi,

I'm using a DateBox() widget for users to enter their date of birth.
When the picker is displayed, on either side of the month/year
displayed in the center top of the picker are the greater than and
less than arrows for moving forward or backward, month at a time. I
have not figured out anyway to add year at a time as well (25 or more
years of moths is a lot of clicks). Is there anyway to accomplish
that?

Thanks,
Rob

[Jim Douglas]

No, it's not possible, short of writing a custom DatePicker. You
might want to vote for this open issue:

http://code.google.com/p/google-web-toolkit/issues/detail?id=3520

[Danny Goovaerts]

It's not necessary to write a custom DatePicker. It suffices to create
a DatePicker with a custom MonthSelector.
Here is my implementation
//
package eu.oobikwe.gwt.ui;

import com.google.gwt.user.datepicker.client.CalendarModel;
import com.google.gwt.user.datepicker.client.DatePicker;
import com.google.gwt.user.datepicker.client.DefaultCalendarView;

public class DatePickerWithYearSelector extends DatePicker {

public DatePickerWithYearSelector() {
super(new MonthAndYearSelector(),new DefaultCalendarView(),new
CalendarModel()) ;
MonthAndYearSelector monthSelector = (MonthAndYearSelector)
this.getMonthSelector() ;
monthSelector.setPicker(this) ;
monthSelector.setModel(this.getModel()) ;
}

public void refreshComponents() {
super.refreshAll() ;
}

}

//
package eu.oobikwe.gwt.ui;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.PushButton;
import com.google.gwt.user.client.ui.HTMLTable.CellFormatter;
import com.google.gwt.user.datepicker.client.CalendarModel;
import com.google.gwt.user.datepicker.client.MonthSelector;

/**
* A simple {@link MonthSelector} used for the default date picker.
Not
* extensible as we wish to evolve it freely over time.
*/

public class MonthAndYearSelector extends MonthSelector {

private static String BASE_NAME = "datePicker" ;

private PushButton backwards;
private PushButton forwards;
private PushButton backwardsYear;
private PushButton forwardsYear;
private Grid grid;
private int previousYearColumn = 0;
private int previousMonthColumn = 1 ;
private int monthColumn = 2 ;
private int nextMonthColumn = 3;
private int nextYearColumn = 4 ;
private CalendarModel model ;
private DatePickerWithYearSelector picker ;


public void setModel(CalendarModel model) {
this.model = model;
}



public void setPicker(DatePickerWithYearSelector picker) {
this.picker = picker;
}



@Override
protected void refresh() {
String formattedMonth = getModel().formatCurrentMonth();
grid.setText(0, monthColumn, formattedMonth);
}

@Override
protected void setup() {
// Set up backwards.
backwards = new PushButton();
backwards.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
addMonths(-1);
}
});

backwards.getUpFace().setHTML("‹");
backwards.setStyleName(BASE_NAME + "PreviousButton");

forwards = new PushButton();
forwards.getUpFace().setHTML("›");
forwards.setStyleName(BASE_NAME + "NextButton");
forwards.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
addMonths(+1);
}
});


// Set up backwards year
backwardsYear = new PushButton();
backwardsYear.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
addMonths(-12);
}
});

backwardsYear.getUpFace().setHTML("«");
backwardsYear.setStyleName(BASE_NAME + "PreviousButton");

forwardsYear = new PushButton();
forwardsYear.getUpFace().setHTML("»");
forwardsYear.setStyleName(BASE_NAME + "NextButton");
forwardsYear.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
addMonths(+12);
}
});

// Set up grid.
grid = new Grid(1, 5);
grid.setWidget(0, previousYearColumn, backwardsYear);
grid.setWidget(0, previousMonthColumn, backwards);
grid.setWidget(0, nextMonthColumn, forwards);
grid.setWidget(0, nextYearColumn, forwardsYear);

CellFormatter formatter = grid.getCellFormatter();
formatter.setStyleName(0, monthColumn, BASE_NAME + "Month");
formatter.setWidth(0, previousYearColumn, "1");
formatter.setWidth(0, previousMonthColumn, "1");
formatter.setWidth(0, monthColumn, "100%");
formatter.setWidth(0, nextMonthColumn, "1");
formatter.setWidth(0, nextYearColumn, "1");
grid.setStyleName(BASE_NAME + "MonthSelector");
initWidget(grid);
}

public void addMonths(int numMonths) {
model.shiftCurrentMonth(numMonths);
picker.refreshComponents();
}

}

Danny

[Pete]

Thank you very much, Danny!! You have saved me countless hours!

It would be great to have this code inside GWT. Steering Committee, what do you say?

[Nataraj Patil C.V.]

Thanks , I am using this in my app

[Danilo Reinert]

There is a patch going on by Julien Dramaix.

You can preview the widget here: http://jdramaix.github.io/gwt_issue_3520/Showcase.html#!CwDatePicker

--

D. Reinert

[Sumit Mane]

Thanks buddy, going to use this into my app. 

Just little contribution:

String formattedMonth = getModel().formatCurrentMonth();

change to:

String formattedMonth = getModel().formatCurrentMonthAndYear();