hadv.de - DatePicker

Einbau eines DatePicker's

Anwender können Datumsangaben direkt über einem Eingabefeld oder über einem DatePicker eingeben. Hier wird gezeigt, wie der DatePicker für Smartphone's bzw. Tablets in eine Anwendung einzubauen ist.

Wird nur mit Sencha Touch gearbeitet, so kann der Einbau eines DatePicker's nach den Vorgaben des Framework's erfolgen. Bei der Migration von Excel liegt das Layout der Applikation als HTML-Code vor, sodass eine andere Art der Implementieren zweckmässig ist. Ziel ist es den DatePicker-Einbau automatisiert vornehmen zu können.

Datumeingabe in der Maske

Ein Datum kann direkt im linken Eingabefeld durch den Benutzer eingegeben werden. Rechts neben dem Eingabefeld befindet sich ein Button. Durch die Betätigung des Button's wird unten im Fenster der DatePicker aufgeblendet.

DatePicker

Das linke Bild zeigt den DatePicker im Einsatz.

HTML-Code

Folgender Code zeigt die Einbettung des DatePicker's in der HTML-Datei.

<div class='picker'>
   <input  class='innerText' name="dbg01_1_7_4" id="dbg01_1_7_4" type="text" onblur="this.value=eedatefmt(fmtdate6,eeparsedate_keep_all(this.value));" tabindex="2" >
   <button class='selectArrowDown' name="arrowDownBtn" onclick="onShowDatePicker(this);" />
</div>

Anlegen des DatePicker's in JavaScript

Das Anlegen des DatePicker's in JavaScript zeigt eine der möglichen genialen Programmiertechniken von JavaScript. Es wird eine Instanz des DatePicker's angelegt. Dabei werden beim Anlegen einige Konfigurationsparameter gesetzt, ohne vorab einen entsprechenden Konstruktor definieren zu müssen. Zusätzlich wird das angelegte Objekt um ein weiteres Attribut erweitert. Als bisher eingefleischter Java- oder C++-Programmierer musste ich mich erst dann diese unkonventionelle Programmierweise gewöhnen. Aber dies macht letztendlich den Erfolg von JavaScript aus: einfach, flexibel und schnell programmiert.

this.datePicker = Ext.apply(
    new Ext.DatePicker({
            yearFrom: 2010,
            yearTo  : 2020,
            doneButton: 'Ok',
            cancelButton: 'Abbruch',
            dayText: 'Tag',
            monthText: 'Monat',
            yearText:  'Jahr',
            listeners: {
              change: this.onDatePickerChange,
              scope: this
            },
            dateFormat: 'm.d.Y'
    }), {
            actDatePickerRef : []
});

DatePicker aufblenden

onShowDatePicker : function(iObj) {
   var tmpDate;
   var tmpParent = iObj.parentElement;
   var tmpFirstChild = tmpParent.firstElementChild;
   var tmpDateStr = tmpFirstChild.value;
   if (tmpDateStr === '' || tmpDateStr === '01.01.1900' || tmpDateStr === 'undefined') {
     tmpDate = new Date();
     tmpDateStr = tmpDate.getDate() + '.' + (tmpDate.getMonth()+1) + '.' + (tmpDate.getYear()+1900);
   }
   else {
     tmpDate = Date.parseDate(tmpDateStr, this.datePicker.dateFormat, true);
   }
   this.datePicker.actDatePickerRef = tmpFirstChild; 
   this.datePicker.value = tmpDate;
   this.datePicker.show();
}

Behandlung des onchange-Ereignis

onDatePickerChange : function(iPicker, iDate) {
    var tmpStr = iDate.getDate() + '.' + (iDate.getMonth()+1) + '.' + (iDate.getYear()+1900);
    iPicker.actDatePickerRef.value = tmpStr;
}