GWT - Widget DatePicker

introduction

le DatePicker widget représente un sélecteur de date GWT standard.

Déclaration de classe

Voici la déclaration pour 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>

Règles de style CSS

Les règles de style CSS par défaut suivantes seront appliquées à tous les widgets DatePicker. Vous pouvez le remplacer selon vos besoins.

.gwt-DatePicker { }

.datePickerMonthSelector {  }

.datePickerMonth {  }

.datePickerPreviousButton {  }

.datePickerNextButton {  }

.datePickerDays {  }

.datePickerWeekdayLabel {  }

.datePickerWeekendLabel {  }

.datePickerDay {  }

.datePickerDayIsToday {  }

.datePickerDayIsWeekend { }

.datePickerDayIsFiller {  }

.datePickerDayIsValue {  }

.datePickerDayIsDisabled { }

.datePickerDayIsHighlighted {  }

.datePickerDayIsValueAndHighlighted { }

Constructeurs de classe

N ° Sr. Constructeur et description
1

DatePicker()

Créez un nouveau sélecteur de dates.
2

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

Créez un nouveau sélecteur de dates.

Méthodes de classe

N ° Sr. Nom et description de la fonction
1

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

Ajoute un gestionnaire HighlightEvent.
2

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

Ajoute un gestionnaire ShowRangeEvent.
3

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

Ajoute un gestionnaire de plage d'exposition et active immédiatement le gestionnaire sur la vue actuelle.
4

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

Ajoutez un nom de style aux dates données.
5

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

Ajoutez un nom de style aux dates données.
6

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

Ajoutez un nom de style aux dates données.
sept

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

Ajoute le nom du style donné aux dates spécifiées, qui doivent être visibles.
8

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

Ajoute le nom du style donné aux dates spécifiées, qui doivent être visibles.
9

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

Ajoute le nom du style donné aux dates spécifiées, qui doivent être visibles.
dix

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

Ajoute un gestionnaire ValueChangeEvent.
11

java.util.Date getCurrentMonth()

Obtient le mois actuel affiché par le sélecteur de date.
12

java.util.Date getFirstDate()

Renvoie la première date affichée.
13

java.util.Date getHighlightedDate()

Obtient la date en surbrillance (celle sur laquelle la souris survole), le cas échéant.
14

java.util.Date getLastDate()

Renvoie la dernière date affichée.
15

protected CalendarModel getModel()

Obtient le CalendarModel associé à ce sélecteur de date.
16

protected MonthSelector getMonthSelector()

Obtient le MonthSelector associé à ce sélecteur de date.
17

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

Obtient le style associé à une date (n'inclut pas les styles définis via addTransientStyleToDates (java.lang.String, java.util.Date)).
18

java.util.Date getValue()

Renvoie la date sélectionnée, ou null si aucune n'est sélectionnée.
19

protected CalendarView getView()

Obtient le CalendarView associé à ce sélecteur de date.
20

boolean isDateEnabled(java.util.Date date)

La date visible est-elle activée?
21

boolean isDateVisible(java.util.Date date)

La date est-elle actuellement affichée dans le sélecteur de dates?
22

void onLoad()

Cette méthode est appelée immédiatement après qu'un widget est attaché au document du navigateur.
23

protected void refreshAll()

Actualise tous les composants de ce sélecteur de date.
24

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

Supprime le styleName des dates données (même s'il est transitoire).
25

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

Supprime le styleName des dates données (même s'il est transitoire).
26

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

Supprime le styleName des dates données (même s'il est transitoire).
27

void setCurrentMonth(java.util.Date month)

Définit le sélecteur de dates pour afficher le mois donné, utilisez getFirstDate () et getLastDate () pour accéder à la plage de dates exacte que le sélecteur de dates a choisi d'afficher.
28

void setStyleName(java.lang.String styleName)

Définit le nom du style du sélecteur de date.
29

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

Définit une date visible à activer ou à désactiver.
30

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

Définit une date visible à activer ou à désactiver.
31

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

Définit un groupe de dates visibles à activer ou désactiver.
32

protected void setup()

Configure le sélecteur de date.
33

void setValue(java.util.Date newValue)

Définit la valeur du DatePicker.
34

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

Définit la valeur du DatePicker.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

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

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

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

  • java.lang.Object

Exemple de widget DatePicker

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget DatePicker dans GWT. Suivez les étapes suivantes pour mettre à jour l'application GWT que nous avons créée dans GWT - Chapitre Créer une application -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application .
2 Modifiez HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié 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>

Voici le contenu du fichier de feuille de style modifié 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 {
}

Voici le contenu du fichier hôte HTML modifié 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>

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui démontrera l'utilisation du 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);
   } 
}

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode développement comme nous l'avons fait dans le chapitre GWT - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant -