How can i apply the custom style to DatePicker from the CssResources class?

Question

I have a DatePicker widget for which i need to apply the custom styles for it. To achive it, what i have done is, in applications main css file, I have added the css styles as below

.dRPLable {
     font-size: 10px;
     font-weight: bold;
     color: gray;
    }

    .dRPBtn {
     background-color: #38B0DE;
     background: #38B0DE;
     color: white;
    }

    .dRPLB {
     background: #EEEEEE;
    }

    .dRPPopup {
        width: 8em;
        height: 2em;
    }
    .mycal .datePickerPreviousButton { visibility: visible; color: gray; }
    .mycal .datePickerNextButton { visibility: visible; color: gray; }

    .mycal .datePickerWeekdayLabel{background: white;}
    .mycal .datePickerMonthSelector {  background: white; }
    .mycal .datePickerMonth { background: white;color: orange;}

    .mycal .datePickerWeekendLabel{background: white;}
    .mycal .datePickerDayIsValue {  background: orange;}
    .mycal .datePickerDayIsWeekend { background: #D9D9D9;}

Then everything is applying perfectly

I am making it as a independent custom widget, for that i have created a separate css file. To access it I have created a resources interface as below,

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.resources.client.ImageResource;

public interface DateRangeTypePickerResources extends ClientBundle {

    DateRangeTypePickerResources INSTANCE = GWT
            .create(DateRangeTypePickerResources.class);

    /*
     * @Source("DocumentImg.jpg") ImageResource getDocumentImg();
     */

    @Source("down.png")
    ImageResource getDownImg();

    @Source("up.png")
    ImageResource getUpImg();

    public interface DateRangeTypePickerCssStyle extends CssResource {
        String dRPLable();

        String dRPBtn();

        String dRPLB();

        String mycal();

        String dRPPopup();

        String datePickerPreviousButton();

        String datePickerNextButton();

        String datePickerWeekdayLabel();

        String datePickerWeekendLabel();

        String datePickerMonthSelector();

        String datePickerMonth();

        String datePickerDayIsValue();

        String datePickerDayIsWeekend();

    }

    @Source("../widget/DateRangeTypePicker.css")
    DateRangeTypePickerCssStyle DateRangeTypePickerCss();

}

How i am accessing those methods as below

public class DateRangePicker extends Composite {
static DateRangeTypePickerResources resources = GWT
            .create(DateRangeTypePickerResources.class);
    DateRangeTypePickerCssStyle css = DateRangeTypePickerResources.INSTANCE
            .DateRangeTypePickerCss();
    static {
        DateRangeTypePickerResources.INSTANCE.DateRangeTypePickerCss()
                .ensureInjected();
    }

public DateRangePicker(DateRangePickerModel dateRangePickerModel) {
    Label startDateLabel = new Label("Start Date");
    startDtToday.setStylePrimaryName(css.dRPLabel());
    flexTable.setWidget(0, 0, startDateLabel);

    DatePicker startDatePicker = new DatePicker();
    startDatePicker.setStyleName(css.mycal());
}
}

Here style is applying for Label. But Style is not applying for DatePicker. How can i apply the custom style to DatePicker from the CssResources class?

How can i apply the custom style to DatePicker from the CssResources class?

Answers (1)

Related Questions