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
打印页面
上一页
下一页
广告

© . All rights reserved.