GWT - Widget DatePicker

Introdução

o DatePicker widget representa um selecionador de data GWT padrão.

Declaração de Classe

A seguir está a declaração para com.google.gwt.user.datepicker.client.DatePicker classe -

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

Regras de estilo CSS

As seguintes regras de estilo CSS padrão serão aplicadas a todos os widgets DatePicker. Você pode substituí-lo de acordo com seus requisitos.

.gwt-DatePicker { }

.datePickerMonthSelector {  }

.datePickerMonth {  }

.datePickerPreviousButton {  }

.datePickerNextButton {  }

.datePickerDays {  }

.datePickerWeekdayLabel {  }

.datePickerWeekendLabel {  }

.datePickerDay {  }

.datePickerDayIsToday {  }

.datePickerDayIsWeekend { }

.datePickerDayIsFiller {  }

.datePickerDayIsValue {  }

.datePickerDayIsDisabled { }

.datePickerDayIsHighlighted {  }

.datePickerDayIsValueAndHighlighted { }

Construtores de classe

Sr. Não. Construtor e descrição
1

DatePicker()

Crie um novo selecionador de data.
2

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

Crie um novo selecionador de data.

Métodos de aula

Sr. Não. Nome e descrição da função
1

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

Adiciona um manipulador HighlightEvent.
2

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

Adiciona um manipulador ShowRangeEvent.
3

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

Adiciona um manipulador de intervalo de exibição e ativa imediatamente o manipulador na visualização atual.
4

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

Adicione um nome de estilo às datas fornecidas.
5

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

Adicione um nome de estilo às datas fornecidas.
6

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

Adicione um nome de estilo às datas fornecidas.
7

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

Adiciona o nome do estilo fornecido às datas especificadas, que devem estar visíveis.
8

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

Adiciona o nome do estilo fornecido às datas especificadas, que devem estar visíveis.
9

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

Adiciona o nome do estilo fornecido às datas especificadas, que devem estar visíveis.
10

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

Adiciona um manipulador ValueChangeEvent.
11

java.util.Date getCurrentMonth()

Obtém o mês atual em que o selecionador de data está mostrando.
12

java.util.Date getFirstDate()

Retorna a primeira data exibida.
13

java.util.Date getHighlightedDate()

Obtém a data destacada (aquela sobre a qual o mouse está passando), se houver.
14

java.util.Date getLastDate()

Retorna a última data exibida.
15

protected CalendarModel getModel()

Obtém o CalendarModel associado a este selecionador de data.
16

protected MonthSelector getMonthSelector()

Obtém o MonthSelector associado a este selecionador de data.
17

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

Obtém o estilo associado a uma data (não inclui estilos definidos por meio de addTransientStyleToDates (java.lang.String, java.util.Date)).
18

java.util.Date getValue()

Retorna a data selecionada ou nulo se nenhuma for selecionada.
19

protected CalendarView getView()

Obtém o CalendarView associado a este seletor de data.
20

boolean isDateEnabled(java.util.Date date)

A data visível está ativada?
21

boolean isDateVisible(java.util.Date date)

A data é mostrada atualmente no selecionador de data?
22

void onLoad()

Este método é chamado imediatamente após um widget ser anexado ao documento do navegador.
23

protected void refreshAll()

Atualiza todos os componentes deste selecionador de data.
24

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

Remove o styleName das datas fornecidas (mesmo se for temporário).
25

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

Remove o styleName das datas fornecidas (mesmo se for temporário).
26

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

Remove o styleName das datas fornecidas (mesmo se for temporário).
27

void setCurrentMonth(java.util.Date month)

Define o selecionador de data para mostrar o mês determinado, use getFirstDate () e getLastDate () para acessar o intervalo de datas exato que o selecionador de data escolheu exibir.
28

void setStyleName(java.lang.String styleName)

Define o nome do estilo do selecionador de data.
29

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

Define uma data visível para ser ativada ou desativada.
30

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

Define uma data visível para ser ativada ou desativada.
31

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

Define um grupo de datas visíveis a serem ativadas ou desativadas.
32

protected void setup()

Configura o selecionador de data.
33

void setValue(java.util.Date newValue)

Define o valor do DatePicker.
34

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

Define o valor do DatePicker.

Métodos herdados

Esta classe herda métodos das seguintes classes -

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

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

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

  • java.lang.Object

Exemplo de widget DatePicker

Este exemplo o levará por etapas simples para mostrar o uso de um widget DatePicker no GWT. Siga as etapas a seguir para atualizar o aplicativo GWT que criamos no GWT - capítulo Criar aplicativo -

Degrau Descrição
1 Crie um projeto com o nome HelloWorld em um pacote com.tutorialspoint conforme explicado no capítulo GWT - Criar aplicativo .
2 Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3 Compile e execute o aplicativo para verificar o resultado da lógica implementada.

A seguir está o conteúdo do descritor do 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 seguir está o conteúdo do arquivo de folha 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 seguir está o conteúdo do arquivo 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>

Vamos ter o seguinte conteúdo do arquivo Java src/com.tutorialspoint/HelloWorld.java que demonstrará o uso do 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);
   } 
}

Quando você estiver pronto com todas as alterações feitas, vamos compilar e rodar o aplicativo em modo de desenvolvimento como fizemos no capítulo GWT - Criar Aplicativo . Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado -