GWT DatePicker组件

GWT DatePicker组件介绍

DatePicker组件代表标准GWT日期选择器。

GWT DatePicker组件声明

以下是com.google.gwt.user.client.ui.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 { }

GWT DatePicker组件构造方法

构造方法	描述
DatePicker()	创建一个新的日期选择器。
protected DatePicker(MonthSelector monthSelector, CalendarView view, CalendarModel model)	创建一个新的日期选择器。

GWT DatePicker组件方法

方法	描述
HandlerRegistration addHighlightHandler(HighlightHandler<java.util.Date> handler)	添加一个 HighlightEvent 处理程序。
Handler Registration add Show Range Handler (ShowRangeHandler<java.util.Date> handler)	添加 ShowRangeEvent 处理程序。
Handler Registration addShow Range Handler AndFire (Show Range Handler<java.util.Date> handler)	添加显示范围处理程序并立即激活当前视图上的处理程序。
void addStyleToDates(java.lang.String styleName, java.util.Date date)	为给定的日期添加样式名称。
void addStyleToDates(java.lang.String styleName, java.util.Date date, java.util.Date... moreDates)	为给定的日期添加样式名称。
void add Style To Dates(java.lang.String style Name, java.lang.Iterable<java.util.Date> dates)	为给定的日期添加样式名称。
void addTransientStyleToDates(java.lang.String styleName, java.util.Date date)	将给定的样式名称添加到必须可见的指定日期。
void addTransientStyleToDates(java.lang.String styleName, java.util.Date date, java.util.Date... moreDates)	将给定的样式名称添加到必须可见的指定日期。
void add Transient Style ToDates(java.lang.String styleName, java.lang.Iterable<java.util.Date> dates)	将给定的样式名称添加到必须可见的指定日期。
Handler Registration addValue Change Handler(ValueChangeHandler<java.util.Date> handler)	添加 ValueChangeEvent 处理程序。
java.util.Date getCurrentMonth()	获取日期选择器显示的当前月份。
java.util.Date getFirstDate()	返回第一个显示的日期。
java.util.Date getHighlightedDate()	获取突出显示的日期（鼠标悬停在上面的日期），如果有的话。
java.util.Date getLastDate()	返回最后显示的日期。
protected CalendarModel getModel()	获取与此日期选择器关联的 CalendarModel。
protected MonthSelector getMonthSelector()	获取与此日期选择器关联的 MonthSelector。
java.lang.String getStyleOfDate(java.util.Date date)	获取与日期关联的样式（不包括通过 addTransientStyleToDates(java.lang.String, java.util.Date) 设置的样式）。
java.util.Date getValue()	返回选定的日期，如果没有选择，则返回 null。
protected CalendarView getView()	获取与此日期选择器关联的 CalendarView。
boolean isDateEnabled(java.util.Date date)	是否启用了可见日期
boolean isDateVisible(java.util.Date date)	当前日期是否显示在日期选择器中
void onLoad()	在小部件附加到浏览器的文档后立即调用此方法。
protected void refreshAll()	刷新此日期选择器的所有组件。
void removeStyleFromDates(java.lang.String styleName, java.util.Date date)	从给定日期中删除 styleName（即使它是暂时的）。
void removeStyleFromDates(java.lang.String styleName, java.util.Date date, java.util.Date... moreDates)	从给定日期中删除 styleName（即使它是暂时的）。
void remove Style From Dates(java.lang.String styleName, java.lang.Iterable<java.util.Date> dates)	从给定日期中删除 styleName（即使它是暂时的）。
void setCurrentMonth(java.util.Date month)	设置日期选择器以显示给定月份，使用 getFirstDate() 和 getLastDate() 访问日期选择器选择显示的确切日期范围。
void setStyleName(java.lang.String styleName)	设置日期选择器样式名称。
void setTransientEnabledOnDates(boolean enabled, java.util.Date date)	设置要启用或禁用的可见日期。
void setTransientEnabledOnDates(boolean enabled, java.util.Date date, java.util.Date... moreDates)	设置要启用或禁用的可见日期。
void set Transient Enabled On Dates(boolean enabled, java.lang.Iterable<java.util.Date> dates)	设置要启用或禁用的一组可见日期。
protected void setup()	设置日期选择器。
void setValue(java.util.Date newValue)	设置 DatePicker 的值。
void setValue(java.util.Date newValue, boolean fireEvents)	设置 DatePicker 的值。

GWT DatePicker组件示例

1）修改HelloWorld.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.0//EN"
        "http://gwtproject.org/doctype/2.8.0/gwt-module.dtd">
<module rename-to="HelloWorld">

    <!-- Inherit the core Web Toolkit stuff.                  -->
    <inherits name='com.google.gwt.user.User'/>

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


    <!-- Specify the app servlets.                   -->
    <servlet path='/HelloWorldService' class='com.yiidian.helloWorld.server.HelloWorldServiceImpl'/>

    <source path = 'client'/>
    <source path = 'shared'/>
</module>

2）修改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 {
}

3）修改HelloWorld.html

<html>
<head>
    <title>yiidian.com-GWT Hello World</title>
    <link type="text/css" rel="stylesheet" href="HelloWorld.css">
    <script type="text/javascript" language="javascript" src="HelloWorld/HelloWorld.nocache.js"></script>
</head>
<body>
<h1>DatePicker Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>

4）HelloWorld.java

package com.yiidian.helloWorld.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
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.Command;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.user.datepicker.client.DateBox;
import com.google.gwt.user.datepicker.client.DatePicker;

import java.util.Date;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
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 MenuBar组件 GWT CellTree组件

GWT DatePicker组件

GWT DatePicker组件 介绍

GWT DatePicker组件 声明

CSS 样式规则

GWT DatePicker组件 构造方法

GWT DatePicker组件 方法

GWT DatePicker组件 示例

1）修改HelloWorld.gwt.xml

2）修改HelloWorld.css

3）修改HelloWorld.html

4）HelloWorld.java

微信关注

GWT DatePicker组件介绍

GWT DatePicker组件声明

GWT DatePicker组件构造方法

GWT DatePicker组件方法

GWT DatePicker组件示例