GWT - 日期選擇器部件

上一頁
下一頁

簡介

DatePicker 部件表示標準的 GWT 日期選擇器。

類宣告

以下是 com.google.gwt.user.datepicker.client.DatePicker 類的宣告：

public class DatePicker
   extends Composite
      implements HasHighlightHandlers<java.util.Date>,
	     HasShowRangeHandlers<java.util.Date>, HasValue<java.util.Date>

CSS 樣式規則

以下預設 CSS 樣式規則將應用於所有 DatePicker 部件。您可以根據您的需求覆蓋它。

.gwt-DatePicker { }

.datePickerMonthSelector {  }

.datePickerMonth {  }

.datePickerPreviousButton {  }

.datePickerNextButton {  }

.datePickerDays {  }

.datePickerWeekdayLabel {  }

.datePickerWeekendLabel {  }

.datePickerDay {  }

.datePickerDayIsToday {  }

.datePickerDayIsWeekend { }

.datePickerDayIsFiller {  }

.datePickerDayIsValue {  }

.datePickerDayIsDisabled { }

.datePickerDayIsHighlighted {  }

.datePickerDayIsValueAndHighlighted { }

類建構函式

序號 建構函式 & 描述
1

DatePicker()

建立一個新的日期選擇器。
2

protected DatePicker(MonthSelector monthSelector, CalendarView view, CalendarModel model)

建立一個新的日期選擇器。

類方法

序號 函式名稱 & 描述
1

HandlerRegistration addHighlightHandler(HighlightHandler<java.util.Date> handler)

新增一個 HighlightEvent 處理程式。
2

Handler Registration add Show Range Handler (ShowRangeHandler<java.util.Date> handler)

新增一個 ShowRangeEvent 處理程式。
3

Handler Registration addShow Range Handler AndFire (Show Range Handler<java.util.Date> handler)

新增一個顯示範圍處理程式，並立即在當前檢視上啟用處理程式。
4

void addStyleToDates(java.lang.String styleName, java.util.Date date)

向給定的日期新增樣式名稱。
5

void addStyleToDates(java.lang.String styleName, java.util.Date date, java.util.Date... moreDates)

向給定的日期新增樣式名稱。
6

void add Style To Dates(java.lang.String style Name, java.lang.Iterable<java.util.Date> dates)

向給定的日期新增樣式名稱。
7

void addTransientStyleToDates(java.lang.String styleName, java.util.Date date)

向指定的日期新增給定的樣式名稱，這些日期必須可見。
8

void addTransientStyleToDates(java.lang.String styleName, java.util.Date date, java.util.Date... moreDates)

向指定的日期新增給定的樣式名稱，這些日期必須可見。
9

void add Transient Style ToDates(java.lang.String styleName, java.lang.Iterable<java.util.Date> dates)

向指定的日期新增給定的樣式名稱，這些日期必須可見。
10

Handler Registration addValue Change Handler(ValueChangeHandler<java.util.Date> handler)

新增一個 ValueChangeEvent 處理程式。
11

java.util.Date getCurrentMonth()

獲取日期選擇器當前顯示的月份。
12

java.util.Date getFirstDate()

返回第一個顯示的日期。
13

java.util.Date getHighlightedDate()

獲取突出顯示的日期（滑鼠懸停的日期），如果有的話。
14

java.util.Date getLastDate()

返回最後一個顯示的日期。
15

protected CalendarModel getModel()

獲取與此日期選擇器關聯的 CalendarModel。
16

protected MonthSelector getMonthSelector()

獲取與此日期選擇器關聯的 MonthSelector。
17

java.lang.String getStyleOfDate(java.util.Date date)

獲取與日期關聯的樣式（不包括透過 addTransientStyleToDates(java.lang.String, java.util.Date) 設定的樣式）。
18

java.util.Date getValue()

返回選定的日期，如果沒有選擇任何日期則返回 null。
19

protected CalendarView getView()

獲取與此日期選擇器關聯的 CalendarView。
20

boolean isDateEnabled(java.util.Date date)

可見日期是否啟用？
21

boolean isDateVisible(java.util.Date date)

日期是否當前顯示在日期選擇器中？
22

void onLoad()

此方法在部件附加到瀏覽器的文件後立即呼叫。
23

protected void refreshAll()

重新整理此日期選擇器的所有元件。
24

void removeStyleFromDates(java.lang.String styleName, java.util.Date date)

從給定的日期中刪除 styleName（即使它是臨時的）。
25

void removeStyleFromDates(java.lang.String styleName, java.util.Date date, java.util.Date... moreDates)

從給定的日期中刪除 styleName（即使它是臨時的）。
26

void remove Style From Dates(java.lang.String styleName, java.lang.Iterable<java.util.Date> dates)

從給定的日期中刪除 styleName（即使它是臨時的）。
27

void setCurrentMonth(java.util.Date month)

將日期選擇器設定為顯示給定的月份，使用 getFirstDate() 和 getLastDate() 訪問日期選擇器選擇顯示的確切日期範圍。
28

void setStyleName(java.lang.String styleName)

設定日期選擇器的樣式名稱。
29

void setTransientEnabledOnDates(boolean enabled, java.util.Date date)

設定可見日期為啟用或停用。
30

void setTransientEnabledOnDates(boolean enabled, java.util.Date date, java.util.Date... moreDates)

設定可見日期為啟用或停用。
31

void set Transient Enabled On Dates(boolean enabled, java.lang.Iterable<java.util.Date> dates)

設定一組可見日期為啟用或停用。
32

protected void setup()

設定日期選擇器。
33

void setValue(java.util.Date newValue)

設定 DatePicker 的值。
34

void setValue(java.util.Date newValue, boolean fireEvents)

設定 DatePicker 的值。

繼承的方法

此類繼承自以下類的方法：

  • com.google.gwt.user.client.ui.UIObject

  • com.google.gwt.user.client.ui.Widget

  • com.google.gwt.user.client.ui.Composite

  • java.lang.Object

DatePicker 部件示例

此示例將引導您完成簡單的步驟，以顯示如何在 GWT 中使用 DatePicker 部件。按照以下步驟更新我們在GWT - 建立應用程式章節中建立的 GWT 應用程式：

步驟 描述
1 在GWT - 建立應用程式章節中說明的包com.tutorialspoint下，建立一個名為HelloWorld的專案。
2 修改HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html和HelloWorld.java，如下所述。保持其餘檔案不變。
3 編譯並執行應用程式以驗證已實現邏輯的結果。

以下是修改後的模組描述符src/com.tutorialspoint/HelloWorld.gwt.xml的內容。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

以下是修改後的樣式表文件war/HelloWorld.css的內容。

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-DatePicker {
   border: 1px solid #ccc;
   border-top:1px solid #999;
   cursor: default;
}

.gwt-DatePicker td,
.datePickerMonthSelector td:focus {
   outline: none;
}

.datePickerMonthSelector td:focus {
   outline: none;
}

.datePickerDays {
   width: 100%;
   background: white;
}

.datePickerDay,
.datePickerWeekdayLabel,
.datePickerWeekendLabel {
   font-size: 85%;
   text-align: center;
   padding: 4px;
   outline: none;
   font-weight:bold;
   color:#333;
   border-right: 1px solid #EDEDED;
   border-bottom: 1px solid #EDEDED;
}

.datePickerWeekdayLabel,
.datePickerWeekendLabel {
   background: #fff;
   padding: 0px 4px 2px;
   cursor: default;
   color:#666;
   font-size:70%;
   font-weight:normal;
}

.datePickerDay {
   padding: 4px 7px;
   cursor: hand;
   cursor: pointer;
}

.datePickerDayIsWeekend {
   background: #f7f7f7;
}

.datePickerDayIsFiller {
   color: #999;
   font-weight:normal;
}

.datePickerDayIsValue {
   background: #d7dfe8;
}

.datePickerDayIsDisabled {
   color: #AAAAAA;
   font-style: italic;
}

.datePickerDayIsHighlighted {
   background: #F0E68C;
}

.datePickerDayIsValueAndHighlighted {
   background: #d7dfe8;
}

.datePickerDayIsToday {
   padding: 3px;
   color: #00f;
   background: url(images/hborder.png) repeat-x 0px -2607px;
}

.datePickerMonthSelector {
   width: 100%;
   padding: 1px 0 5px 0;
   background: #fff;
}

.datePickerPreviousButton,
.datePickerNextButton {
   font-size: 120%;
   line-height: 1em;
   color: #3a6aad;
   cursor: hand;
   cursor: pointer;
   font-weight: bold;
   padding: 0px 4px;
   outline: none;
}

td.datePickerMonth {
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   font-size: 100%;
   font-weight: bold;
   color: #333;
}

.gwt-DateBox {
   padding: 5px 4px;
   border: 1px solid #ccc;
   border-top: 1px solid #999;
   font-size: 100%;
}

.gwt-DateBox input {
   width: 8em;
}

.dateBoxFormatError {
   background: #ffcccc;
}

.dateBoxPopup {
}

以下是修改後的 HTML 主機檔案war/HelloWorld.html的內容。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>DatePicker Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

讓我們使用以下 Java 檔案src/com.tutorialspoint/HelloWorld.java的內容，它將演示 Tree 部件的使用。

package com.tutorialspoint.client;

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.datepicker.client.DateBox;
import com.google.gwt.user.datepicker.client.DatePicker;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      // Create a basic date picker
      DatePicker datePicker = new DatePicker();
      final Label text = new Label();

      // Set the value in the text box when the user selects a date
      datePicker.addValueChangeHandler(new ValueChangeHandler<Date>() {
         @Override
         public void onValueChange(ValueChangeEvent<Date> event) {
            Date date = event.getValue();
            String dateString = 
            DateTimeFormat.getFormat("MM/dd/yyyy").format(date);
            text.setText(dateString);				
         }
      });
      
      // Set the default value
      datePicker.setValue(new Date(), true);

      // Create a DateBox
      DateTimeFormat dateFormat = DateTimeFormat.getFormat("MM/dd/yyyy");
      DateBox dateBox = new DateBox();
      dateBox.setFormat(new DateBox.DefaultFormat(dateFormat));

      Label selectLabel = new Label("Permanent DatePicker:");
      Label selectLabel2 = new Label("DateBox with popup DatePicker:");
      
      // Add widgets to the root panel.
      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(selectLabel);
      vPanel.add(text);
      vPanel.add(datePicker);
      vPanel.add(selectLabel2);
      vPanel.add(dateBox);

      RootPanel.get("gwtContainer").add(vPanel);
   } 
}

準備好所有更改後，讓我們像在GWT - 建立應用程式章節中所做的那樣，在開發模式下編譯並執行應用程式。如果您的應用程式一切正常，這將產生以下結果：

GWT DatePicker Widget
gwt_complex_widgets.htm
列印頁面
上一頁
下一頁
廣告