Composant Flex – Sélection de la Date et de l'Heure (DateTime)
Pour la création d'un formulaire Flex, j'avais besoin de rentrer la date d'un évènement ainsi que l'heure, avant l'envoi vers un WebService. Pour la sélection de la date, il y a le composant Flex DateField qui se présente comme un champ texte et qui affiche un calendrier (DateChooser), une fois cliqué. Pour la sélection de l'heure, je pouvais utiliser des NumericStepper, permettant de choisir facilement l'heure (+/-). J'ai donc fait quelques recherches pour essayer de trouver un composant permettant de faire ces deux sélections en un seul composant.
Joel Hooks propose un composant bien fait appelé DateTimePicker, qui permet de regrouper ces pickers. Ce composant est Open Source, libre à vous de le mettre à votre sauce.Voici un exemple de son utilisation:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:timePicker="com.visualempathy.display.controls.datetime.*"
horizontalAlign="center"
verticalAlign="top" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
[Bindable] private var dateString:String;
public function onClick():void
{
if(picker.selectedDate.getFullYear() == 1974)
{
picker.selectedDate = new Date()
button.label = "My Birthday"
}
else
{
picker.selectedDate = new Date(1974,4,11,7,40)
button.label = "Now"
}
}
]]>
</mx:Script>
<mx:VBox horizontalAlign="center" verticalAlign="top" width="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" height="300">
<mx:VBox width="100%" horizontalAlign="center" verticalAlign="middle" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" backgroundColor="#F0F0F1" borderStyle="solid" borderThickness="0" cornerRadius="10">
<mx:Label text="Date and Time Picker:" fontWeight="bold" fontSize="14"/>
<timePicker:DateTimePicker selectedDate="{new Date()}" id="picker" change="this.dateString = picker.selectedDate.toString()" minuteIncrement="5" backgroundColor="#FFFFFF"/>
</mx:VBox>
<mx:HBox>
<mx:Button id="button" label="My Birthday" click="onClick()"/>
</mx:HBox>
<mx:Label text="Selected Date: {dateString}" id="the" width="100%" textAlign="center" fontWeight="bold"/>
</mx:VBox>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Comme vous pouvez le constater, ce composant est prévu pour fonctionner avec des dates et des temps au format US (format MM/DD/YYYY et heures séparées en AM/PM). Si vous voulez rendre ce composant avec un format plus français, c'est-à-dire DD/MM/YYYY et heures sur 24h, vous pouvez modifier ce composant comme vous le souhaitez.Voilà ma version du composant:
Flex Source Code Download: Télécharger le code source complet de l'application
Libre à vous d'adapter ce composant comme vous le souhaitez 
Articles similaires
- Flex Drag And Drop – Déplacer des éléments avec dragMoveEnabled
- Flex UIComponent – Déclencher l'évènement change lors de la modification du selectedItem en AS3 (ComboBox, List et DataGrid)
- Composant Flex – ComboBox avec pagination verticale
- Flex Layout – Barre de Défilement et Clipping (ScrollBar, ScrollPolicy et clipContent)
- Flex 4 – Le lien "Données" entre Skin et Composant
Aucun trackbacks pour l'instant
Mes projets (Open Source)
Autres
17 décembre 2009
Bonjour,
Je cherche à Modifier le composant DateChooser (via l'héritage) afin de remplacer chacune des cases par une liste (ou un autre composant personnalisé). Le but étant de pouvoir afficher des évènements dans chacune des cases.
J'ai trouvé quelques pistes du côté de la classe CalendarLayout, mais je m'y perds.
Connaissez-vous un composant reproduisant ce comportement?
Sinon, auriez-vous d'autres pistes à me proposer, s'il vous plait?
18 décembre 2009
Bonjour,
Personnelement, je n'ai jamais eu à faire cela. J'ai déjà crée un calendrier lié à des évènements de manière basique mais cela n'allait pas modifier le layout du DateChooser. Le DateChooser indiquait simplement les dates ayant des évènements et au clic, je les affichais à l'exterieur. Je vois mal comment tu vas réussir à caler beaucoup d'information dans ces petites cases, même avec un composant personnalisé, non?
Ou alors utiliser un menu en PopUp au rollover avec la classe Menu ?
Fabien
23 juin 2011
Bonjour,
Je suis actuellement a la recherche d'une solution de contrôle de saisie d'heure dans une datagrid. J'ai essayé plusieurs solutions (numericstepper, maskedtextinput, validator, formatter,..) mais je n'ai pas encore réussi à mettre en place une solution convenable.
Mon cahier des charges requiert un composant de saisie qui ne permet pas de saisir autre chose qu'une heure valide.
Je voulais avoir ton avis pour une solution qui conviendrait.
Merci,
Quentin
23 juin 2011
salut,
c'est quoi le problème avec le composant de cet article ?
fabien
23 juin 2011
Il pourrait convenir mais il est un peu trop imposant.
Mais pour toi, c'est la meilleur solution?
23 juin 2011
Sélection date + heure, tu auras du mal à trouver plus compact, non ?
23 juin 2011
J'ai juste besoin d'une saisie d'heure et je recherche quelque chose qui se rapproche plus d'un masque de saisie.
23 juin 2011
Deux champs texte avec vérification à la frappe feront l'affaire alors
Fabien
23 juin 2011
Très bien merci.
Je vais essayer de mettre en place cette solution.
Quentin
28 juin 2011
Bonjour,
Je reviens sur mon problème que j'avais un peu mis de côté ces derniers jours mais qui revient aujourd'hui au premier plan.
Ne serait il pas possible de faire cette vérification à la frappe dans un seul champ texte?
Pour l'instant, j'effectue ma vérification suivant la longueur de la chaîne, mais en cas d'effacement ou d’édition en milieu de chaîne, cela ne fonctionne plus. Il faudrait que je restreigne la saisie à chaque emplacement dans ma chaîne mais je ne sais pas si cela est possible (quelque chose comme : "e.currentTarget.text[0].restrict = [0-2]")
Quentin
28 juin 2011
Salut,
Tout est possible, après c'est juste de la logique plus ou moins difficile à écrire en AS3
Fabien
18 décembre 2011
Merci pour toutes ces tutos sur Flex!