2011-11-14 18 views
0

datapickerのカスタム背景を追加しようとしていますが、土曜日/日曜日の日付では機能しません。DatePicker GWTウィジェットにCSSを追加

私は週の5日を見ることができますが、同じコードはS列とS列では機能していません。他のケースでやっているように、選択した列のCSSを変更するにはどうすればいいですか?

私の現在のコードは次のとおりです。

datePicker.addStyleToDates("customeDatePicker", date); 

は、私がこれまで行っていると、何が行われるために必要なものを、見るためにこのリンクに従ってください: http://farm7.static.flickr.com/6052/6342954519_defcf4d962_m.jpg

customDatePicker

public class CustomeDatePicker extends DatePicker { 

    public CustomeDatePicker() { 

     this.setStylePrimaryName("nakar"); 
    } 

    @Override 
    public void addStyleToDates(String styleName, Date date) { 
     super.removeStyleFromDates("gwt-DatePicker", date); 
     super.removeStyleDependentName("gwt-DatePicker"); 
     super.removeStyleName("gwt-DatePicker"); 
     super.removeStyleName("datePickerDayIsWeekend"); 
     super.addStyleToDates("customeDatePicker", date); 
     this.getElement().setClassName("customeDatePicker"); 
     this.getElement().getStyle().clearBackgroundImage(); 
     this.getElement().getStyle().clearColor(); 

    } 

    @Override 
    public void addStyleToDates(String styleName, Date date, Date... moreDates) { 
     super.addStyleToDates(styleName, date, moreDates); 

    } 

    @Override 
    public void addStyleToDates(String styleName, Iterable<Date> dates) { 
     super.addStyleToDates(styleName, dates); 
    } 

} 

entrtypoint class 



    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) { 
       final Date date = (Date) event.getValue(); 
       // temp code 
       datePicker.addStyleToDates("customeDatePicker", date); 
       datePicker.getElement().getStyle().clearBackgroundColor(); 
       datePicker.getElement().getStyle().setBackgroundColor("red"); 
       datePicker.addShowRangeHandlerAndFire(new ShowRangeHandler<Date>() { 

        @Override 
        public void onShowRange(ShowRangeEvent<Date> event) { 
         // hun tak 
         datePicker.removeStyleFromDates(datePicker.getStyleName(), date); 


         datePicker.addStyleToDates("customeDatePicker", date); 
         date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000)); 

         datePicker.addStyleToDates("customeDatePicker", date ); 
          datePicker.getElement().getStyle().setBackgroundColor("red"); 


         date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000)); 

         datePicker.addStyleToDates("customeDatePicker", date); 
          datePicker.getElement().getStyle().setBackgroundColor("red"); 

         date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000)); 

         datePicker.addStyleToDates("customeDatePicker", date); 
          datePicker.getElement().getStyle().setBackgroundColor("red"); 

         date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000)); 

         datePicker.addStyleToDates("customeDatePicker", date); 
          datePicker.getElement().getStyle().setBackgroundColor("red"); 

         date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000)); 

         datePicker.addStyleToDates("customeDatePicker", date); 
          datePicker.getElement().getStyle().setBackgroundColor("red"); 

         date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000)); 

         datePicker.addStyleToDates("customeDatePicker", date); 
          datePicker.getElement().getStyle().setBackgroundColor("red"); 
         /*Calendar cal = Calendar.getInstance();*/ 
       /*  cal.setTime(date); 
         cal.add(Calendar.DATE,1); 

         datePicker.addStyleToDates("customeDatePicker",cal.getTime());*/ 


        } 
       }); 


       } 

      // ithay calender rakh 

      }); 


      mainPanel.add(datePicker); 

      RootPanel.get().add(mainPanel); 


     } 
    } 

CSSクラス、デフォルトプロジェクトのCSSに追加しました

.customeDatePicker { 
     color: red; 
     background: cyan; 
     border-color: blue; 
     padding:2px; 
     color: black; 
    } 
+0

あなたの週末の日付に 'addStyleToDates'を呼び出していますか?あなたはコード全体を提供する必要があります。また、日付に追加するCSSスタイルを指定します。何が間違っているかを見過ぎる。 – Strelok

+0

よかったです。しかし、まだ問題を見ることはできません。 addStyleToDatesをどこで呼びますか? – Strelok

+0

私はそれを各日付datePicker.removeStyleFromDates( "datePickerDayIsWeekend"、date); – user1430003

答えて

0

私は同じ問題が発生しました。

datePicker.removeStyleFromDates("datePickerDayIsWeekend",date); 

を右addStyleToDates()の呼び出し/秒後:私はデフォルトの週末スタイルを取り除くために見つけた唯一の解決策を通って、を検索した後に呼び出すことです。

okが多分それは彼が唯一の解決策(あなたは常に日付ピッカーの独自の実装を行うことができます)ではないのですが、それは最速少なくとも:)

EDITです:あなたがヶ月を変更した場合は恐ろしい「datePickerDayIsWeekend」スタイルが戻って取得します!

addShowRangeHandler()を実装して、スタイルを再度読み込み/削除する必要があります。

関連する問題