Das DateTimeInput Widget ist eine Kombination aus DateInput und TimeInput, die uns ermöglichen soll komplette Date Objekte vom Userinput zu erstellen und zu manipulieren. Date- und Time-Input werden zu einem einzigen Wert vereint und als Dateobjekt, ein ISO String ohne Timezone, oder zwei separate Strings im Format {date: „YYYY-MM-DD“, time: „HH:mm:ss“} zurückgegeben.
<div class="w3-row">
<div class="w3-col s9 m10 w3-center">
<div data-dojo-type="moreCore/UI/DateInput/DateInput" data-dojo-attach-point="date_input"></div>
</div>
<div class="w3-col s3 m2">
<div class="w3-col s8 w3-right" data-dojo-type="moreCore/UI/TimeInput/TimeInput" data-dojo-attach-point="time_input"></div>
</div>
</div>
Für Initialisierung sind keine Parameter vorgesehen.
---
setzt protected minTime:string variable im TimeInput Object und definiert damit die max Zeitgrenze. Die walidierungsfunktion soll bim Submit separat aufgerufen werden.
setMaxTime(maxTime: string): voidsetzt protected maxTime:string variable im TimeInput Object und definiert damit die max Zeitgrenze. Die walidierungsfunktion soll bim Submit separat aufgerufen werden.
setValue(newDateValue?: string, newTimeValue?:string): voidsetzt private _value:string variable und die Input Value zu der gegebenen Value beim Date- und TimeInput den Funktionsargumentn entsprechend.
setMandatoy(bMandatory:boolean = true): voidsetzt den Input required Attribut auf true, den Label Text Style auf "color:red;", den Input auf "w3-border-red w3-pale-red".
getValue():Dateliefert den ausgewählten Wert als Date Object zurück || null.
toStringISO(date: Date): stringconvertiert das Date zu einem String mit dem Format "YYYY-MM-DDTHH:mm:ss", das Backend-Format.
ISOStringToInputValues(iso: string): objectNutzlich wenn man z.B. die Date value aus dem Backend in die Date- und TimeInputs abbilden möchte. Convertiert den "YYYY-MM-DDTHH:mm:ss" String zum Format { date: "YYYY-MM-DD", time: "HH:mm:ss" }.
setValuesFromISOString(iso: string): voidtakes an ISO Date Sttring as a param, turns it in separate date and time values, and sends them to setValue() respectively
setDateLabel(newValue: string): voidsetzt den Parameter-Wert als Input Label für DateInput und macht das Label sichtbar.
setTimeLabel(newValue: string): voidsetzt den Parameter-Wert als Input Label für TimeInput und macht das Label sichtbar.
getDateLabel():stringLiefert den Label Text für DateInput zurück
getTimeLabel():stringLiefert den Label Text für TimeInput zurück
setIsLabelVisible(visibility: boolean): voidsetzt die Property _isLabelVisible uf den Parameter-Wert und macht das Label (un)sichtbar: true == sichtbar, false == unsichtbar.
_setMinTimeAttr, _setMaxTimeAttr, _setValueAttr(), _setIsMandatoryAttr(), _setDateLabelAttr(), _getDateLabelAttr(), _setTimeLabelAttr(), _getTimeLabelAttr(), _setValuesFromISOStringAttr().
Das Widget soll einen simplen Time Input ermöglichen, mit der Funktionalität den Userinput als String auszulesen, den Label zu setzen, zeigen und verstecken, den „required“ Attribut zu manipulieren und den input in einem bestimmten Bereich zwischen MinTime und MaxTime zu validieren.
Für Initialisierung sind keine Parameter vorgesehen.
_isLabelVisible: boolean = false;
isMandatory: boolean = false;
setzt protected minTime:string variable und definiert damit die min Zeitgrenze.
setMaxTime(maxTime: string): voidsetzt protected maxTime:string variable und definiert damit die max Zeitgrenze.
validateTime(value: string): booleanprüft ob die TimeInput Value sich in dem Bereich zwischen Min und Max Werten befindet.
setValue(newValue: string): voidsetzt private _value:string variable und die Input Value zu der gegebenen Value.
setMandatoy(bMandatory:boolean = true): voidsetzt den Input required Attribut auf true.
getValue():stringliefert den ausgewählten Wert als String zurück || „no date selected“.
setLabel(newValue:string):voidsetzt den Parameter-Wert als Input Label und macht das Label sichtbar.
getLabel():stringLiefert den Label Text zurück ||null
setIsLabelVisible(visibility: boolean): voidsetzt die Property _isLabelVisible uf den Parameter-Wert und macht das Label (un)sichtbar: true == sichtbar, false == unsichtbar.
_setValueAttr(), _getValueAttr(), _getValueAsDateAttr(), _setIsMandatoryAttr(), _setLabelAttr().