Composant dateField personnalisé avec comboBox et bouton d'effacement à l'intérieur du calendrier déroulant dans flex3

Question

J'ai inséré un composant dateField. En cliquant, il affiche le calendrier. Je voudrais ajouter 2 comboboxes, un montre des heures (0 à 23) et d'autres pour les minutes (0 à 59), au calendrier de sorte que l'utilisateur puisse sélectionner l'heure avec la date, et qui sera montrée dans le texte entrée comme date et heure. Une autre chose que je voudrais ajouter est effacer le bouton pour effacer la date sélectionnée dans le calendrier.

Answer 1

Puisqu'un champ DateField est essentiellement un TextInput couplé à un DateChooser, pourquoi ne pas le faire vous-même? Ajoutez également vos deux ComboBox, modifiez votre TextInput editable = "false" text = "{dateTime}" où dateTime est une variable de chaîne Bindable que vous créez comme la concaténation des valeurs dans le DateChooser et les deux ComboBox. Appelez la fonction qui crée la chaîne dateTime sur l'événement change des trois entrées. Enfin, ajoutez votre bouton d'effacement et faites appel à l'événement click dans lequel vous définissez DateChooser à aujourd'hui, et les deux zones de liste déroulante aux valeurs par défaut, et mettez à jour la chaîne dateTime si nécessaire (vierge ou date actuelle/temps en fonction de ce que vous essayez de faire.)

Modifier: Comme vous avez demandé gentiment, et comme je suis en train d'étudier pour l'examen ACE et j'ai pensé que cela fait un bel exercice, voici ce que j'ai trouvé. J'ai fait le composant personnalisé suivant dans un package appelé « composants » et l'a appelé « myCustomDateField.mxml »

<?xml version="1.0" encoding="utf-8"?> 
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" 
initialize="resetDisplay()"> 
<mx:DateFormatter id="dateFormat" formatString="DD-MMM-YYYY JJ:NN" /> 

<mx:Script> 
<![CDATA[ 

[Bindable] 
public var dateTime:Date; 

    private function updateDisplay():void { 
    var userDate:Date = new Date(); 
    userDate.date = cal.selectedDate.date; 
    userDate.month = cal.selectedDate.month; 
    userDate.fullYear = cal.selectedDate.fullYear; 
    userDate.hours = hour.value; 
    userDate.minutes = minute.value; 
    dateTime = userDate; 
} 

private function resetDisplay():void { 
    var now:Date = new Date(); 
    cal.selectedDate = now; 
    hour.value = now.hours; 
    minute.value = now.minutes; 
    dateTime = now; 
} 

]]> 
</mx:Script> 

<mx:Label text="Select Date and Time:" /> 
<mx:TextInput id="display" text="{dateFormat.format(dateTime)}" editable="false" /> 
<mx:DateChooser id="cal" yearNavigationEnabled="true" change="updateDisplay()" /> 
<mx:Label text="Hour:" /> 
<mx:NumericStepper id="hour" minimum="0" maximum="23" change="updateDisplay()" /> 
<mx:Label text="Minute:" /> 
<mx:NumericStepper id="minute" minimum="0" maximum="59" change="updateDisplay()" /> 
<mx:Button label="Clear" click="resetDisplay()" /> 

</mx:HBox> 

Dans ma demande, j'ai ajouté le xmlns:cust="components.*" dans la balise de déclaration et emboîtés l'un <cust:myCustomDateFeild id="myDate" />. j'ai pu accéder l'entrée dans le parent en utilisant {myDate.dateTime}.

J'ai fait quelques suppositions de conception que vous pouvez décider de changer, comme le formateur, et j'ai remplacé vos combos avec NumericStepper.