0 down vote favorite
share [fb] share [tw]
I have developed the code to change the gwt datepicker CSS for a week
for a selected date.
i am able to change the whole week colour, but i move to next week or
previous week and return back to current date, then the css on
weekends is removed but on remaining 5 days, it there.
I am attaching both the classes and css-classes which i am using.
custom datepicker class
import java.util.Date;
import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ChangeHandler;
import com.google.gwt.event.logical.shared.ShowRangeHandler;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.i18n.client.LocaleInfo;
import com.google.gwt.i18n.client.constants.DateTimeConstants;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.datepicker.client.DatePicker;
/**
public class CustomeDatePicker extends DatePicker {
private Date date;
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
@Override
public HandlerRegistration addShowRangeHandler(
ShowRangeHandler<Date> handler) {
if(getDate()!=null){
setWeekStyle(getDate());
}
return super.addShowRangeHandler(handler);
}
public CustomeDatePicker() {
}
@Override
public void addStyleToDates(String styleName, Date date) {
super.addStyleToDates("customeDatePicker", date);
}
@Override
public HandlerRegistration addValueChangeHandler(
ValueChangeHandler<Date> handler) {
if(getDate()!=null){
setWeekStyle(getDate());
}
return super.addValueChangeHandler(handler);
}
public void setWeekStyle(Date date) {
setDate(date);
DateTimeConstants constants =
LocaleInfo.getCurrentLocale().getDateTimeConstants();
int firstDay =
Integer.parseInt(constants.firstDayOfTheWeek()) - 1;
int offset = firstDay - date.getDay();
date.setDate(date.getDate() + offset);
// hun tak
/* this.removeStyleFromDates(this.getStyleName(), date);*/
Window.alert("setWeekStyle");
/*this.removeStyleFromDates("datePickerDayIsWeekend", date);*/
this.addStyleToDates("customeDatePicker", date);
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
/* this.removeStyleFromDates("datePickerDayIsWeekend", date);
*/ this.addStyleToDates("customeDatePicker", date );
this.getElement().getStyle().setBackgroundColor("red");
this.removeStyleFromDates("datePickerDayIsWeekend", date);
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
this.addStyleToDates("customeDatePicker", date);
this.getElement().getStyle().setBackgroundColor("red");
this.removeStyleFromDates("datePickerDayIsWeekend", date);
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
this.addStyleToDates("customeDatePicker", date);
this.getElement().getStyle().setBackgroundColor("red");
this.removeStyleFromDates("datePickerDayIsWeekend", date);
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
this.addStyleToDates("customeDatePicker", date);
this.getElement().getStyle().setBackgroundColor("red");
this.removeStyleFromDates("datePickerDayIsWeekend", date);
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
this.addStyleToDates("customeDatePicker", date);
this.getElement().getStyle().setBackgroundColor("red");
this.removeStyleFromDates("datePickerDayIsWeekend", date);
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
this.addStyleToDates("customeDatePicker", date);
this.getElement().getStyle().setBackgroundColor("red");
this.removeStyleFromDates("datePickerDayIsWeekend", date);
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
Window.alert("itjay rakh");
}
}
the entry class
import java.util.Date;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.logical.shared.ShowRangeEvent;
import com.google.gwt.event.logical.shared.ShowRangeHandler;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.datepicker.client.DatePicker;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Gwtproj implements EntryPoint {
/**
* The message displayed to the user when the server cannot be
reached or
* returns an error.
*/
private static final String SERVER_ERROR = "An error occurred
while "
+ "attempting to contact the server. Please check your
network "
+ "connection and try again.";
/**
* Create a remote service proxy to talk to the server-side
Greeting service.
*/
private final GreetingServiceAsync greetingService = GWT
.create(GreetingService.class);
/**
* This is the entry point method.
*/
public void onModuleLoad() {
final CustomeDatePicker datePicker = new CustomeDatePicker();
VerticalPanel mainPanel = new VerticalPanel();
// Set the value in the text box when the user selects a date
datePicker.addValueChangeHandler(new ValueChangeHandler() {
public void onValueChange(ValueChangeEvent event) {
// na kar ab
final Date date = (Date) event.getValue();
datePicker.setWeekStyle(date);
}
});
mainPanel.add(new DatePicker());
mainPanel.add(datePicker);
RootPanel.get().add(mainPanel);
}
}
css
.customeDatePicker {
background: #777777;
}
I need to highlight the whole week, currently whole week is selected
but when move to next/previous month, the saturday/sunday have no css
effect, but other days keep the applied css values.
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
