GWT - DatePicker 小部件
简介
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 { }
类构造函数
Sr.No. | 构造函数 &描述 |
---|---|
1 |
DatePicker() 创建一个新的日期选择器。 |
2 |
protected DatePicker(MonthSelector monthSelector, CalendarView view, CalendarModel model) 创建一个新的日期选择器。 |
类方法
Sr.No. | 函数名称 &描述 |
---|---|
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日期(java.lang.String 样式名称,java.lang.Iterable<java.util.Date>日期) 向给定的日期添加样式名称。 |
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 |
处理程序注册 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>日期) 设置一组可见日期以启用或禁用。 |
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 | 在 com.tutorialspoint 包下创建一个名为 HelloWorld 的项目,如 GWT - 创建应用程序 一章中所述。 |
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() {
// 创建一个基本的日期选择器
DatePicker datePicker = new DatePicker();
final Label text = new Label();
// 当用户选择日期时设置文本框中的值
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);
}
});
// 设置默认值
datePicker.setValue(new Date(), true);
// 创建一个日期框
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:");
// 将小部件添加到根面板。
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 - 创建应用程序 一章中一样,在开发模式下编译并运行应用程序。如果您的应用程序一切正常,这将产生以下结果 −
