GWT: widget de selector de fechas

Introducción

los DatePicker El widget representa un selector de fechas estándar de GWT.

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.datepicker.client.DatePicker clase -

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

Reglas de estilo CSS

Las siguientes reglas de estilo CSS predeterminadas se aplicarán a todos los widgets DatePicker. Puede anularlo según sus requisitos.

.gwt-DatePicker { }

.datePickerMonthSelector {  }

.datePickerMonth {  }

.datePickerPreviousButton {  }

.datePickerNextButton {  }

.datePickerDays {  }

.datePickerWeekdayLabel {  }

.datePickerWeekendLabel {  }

.datePickerDay {  }

.datePickerDayIsToday {  }

.datePickerDayIsWeekend { }

.datePickerDayIsFiller {  }

.datePickerDayIsValue {  }

.datePickerDayIsDisabled { }

.datePickerDayIsHighlighted {  }

.datePickerDayIsValueAndHighlighted { }

Constructores de clases

No Señor. Constructor y descripción
1

DatePicker()

Crea un selector de fecha nuevo.
2

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

Crea un selector de fecha nuevo.

Métodos de clase

No Señor. Nombre y descripción de la función
1

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

Agrega un controlador HighlightEvent.
2

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

Agrega un controlador ShowRangeEvent.
3

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

Agrega un controlador de rango show y activa inmediatamente el controlador en la vista actual.
4

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

Agregue un nombre de estilo a las fechas dadas.
5

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

Agregue un nombre de estilo a las fechas dadas.
6

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

Agregue un nombre de estilo a las fechas dadas.
7

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

Agrega el nombre de estilo dado a las fechas especificadas, que deben ser visibles.
8

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

Agrega el nombre de estilo dado a las fechas especificadas, que deben ser visibles.
9

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

Agrega el nombre de estilo dado a las fechas especificadas, que deben ser visibles.
10

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

Agrega un controlador ValueChangeEvent.
11

java.util.Date getCurrentMonth()

Obtiene el mes actual que muestra el selector de fecha.
12

java.util.Date getFirstDate()

Devuelve la primera fecha mostrada.
13

java.util.Date getHighlightedDate()

Obtiene la fecha resaltada (sobre la que se coloca el mouse), si corresponde.
14

java.util.Date getLastDate()

Devuelve la última fecha mostrada.
15

protected CalendarModel getModel()

Obtiene el CalendarModel asociado a este selector de fecha.
dieciséis

protected MonthSelector getMonthSelector()

Obtiene el MonthSelector asociado con este selector de fecha.
17

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

Obtiene el estilo asociado con una fecha (no incluye los estilos establecidos mediante addTransientStyleToDates (java.lang.String, java.util.Date)).
18

java.util.Date getValue()

Devuelve la fecha seleccionada, o nula si no se selecciona ninguna.
19

protected CalendarView getView()

Obtiene el CalendarView asociado con este selector de fecha.
20

boolean isDateEnabled(java.util.Date date)

¿Está habilitada la fecha visible?
21

boolean isDateVisible(java.util.Date date)

¿Se muestra actualmente la fecha en el selector de fechas?
22

void onLoad()

Este método se llama inmediatamente después de que un widget se adjunta al documento del navegador.
23

protected void refreshAll()

Actualiza todos los componentes de este selector de fecha.
24

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

Elimina el styleName de las fechas dadas (incluso si es transitorio).
25

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

Elimina el styleName de las fechas dadas (incluso si es transitorio).
26

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

Elimina el styleName de las fechas dadas (incluso si es transitorio).
27

void setCurrentMonth(java.util.Date month)

Establece el selector de fechas para mostrar el mes dado, use getFirstDate () y getLastDate () para acceder al rango de fechas exacto que el selector de fechas eligió mostrar.
28

void setStyleName(java.lang.String styleName)

Establece el nombre del estilo del selector de fecha.
29

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

Establece una fecha visible para habilitar o deshabilitar.
30

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

Establece una fecha visible para habilitar o deshabilitar.
31

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

Establece un grupo de fechas visibles para habilitar o deshabilitar.
32

protected void setup()

Configura el selector de fecha.
33

void setValue(java.util.Date newValue)

Establece el valor de DatePicker.
34

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

Establece el valor de DatePicker.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

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

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

  • java.lang.Object

Ejemplo de widget DatePicker

Este ejemplo lo llevará a través de pasos simples para mostrar el uso de un widget DatePicker en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso Descripción
1 Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2 Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3 Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado 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>

A continuación se muestra el contenido del archivo de hoja de estilo modificado 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 {
}

A continuación se muestra el contenido del archivo de host HTML modificado 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>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el uso del widget 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);
   } 
}

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado: