Tipps & Tricks - Zeitdauer berechnen

Dieser Beitrag zeigt, wie die Dauer eines Zeitraums mit JavaScript berechnet werden kann. Dazu wird ein Eingabefeld für das Startdatum und ein weiteres Eingabefeld für das Enddatum benötigt. Die Beispielapplikation können Sie hier herunterladen. Sie kann anschließend wie gewohnt importiert werden. Aktivieren Sie die Experten-Optionen, damit alle Dialoge, die in diesem Beispiel genannt werden, erreichbar sind.

Beispielapplikation im Browser

Wenn Sie die Beispielapplikation im Browser öffnen, können Sie auf der Startseite Beginn und Ende des zu berechnenden Zeitraums eintragen. Klicken Sie anschließend auf "Berechnung". Das Ergebnis wird in der Browserkonsole angezeigt.

Aufbau der Beispielapplikation

Die Beispielapplikation enthält lediglich eine Seite, auf der Sie die beiden benötigten Eingabefelder für Beginn und Ende des Zeitraums finden. Mit der Schaltfläche "Berechnung" wird das Skript gestartet, mit dem die Dauer berechnet wird.

Mit einem Doppelklick auf die Schaltfläche wird der Eigenschaftendialog geöffnet. Dort finden Sie auf dem Reiter "Skript" den Funktionsaufruf, der dem onclick-Event zugeordnet und wie folgt formuliert ist:

calculateDateDuration("10B7488AC1684253320AE33B03DD5FF5EF50ED2A", "D86D01178C27065D49DC8C3C681E24AAA559A208");

Die erste hier angegebene GUID (10B7488AC1684253320AE33B03DD5FF5EF50ED2A) ist die GUID des Eingabefeldes "Datum Start", die zweite (D86D01178C27065D49DC8C3C681E24AAA559A208) die GUID des Eingabefeldes "Datum Ende".

Öffnen Sie den JavaScript-Editor mit Klick auf "JavaScript für Desktop bearbeiten".

Hier finden Sie das folgende Skript:

/**
 * Calculates the duration/difference between to given date controls
 *
 * @param {String}  [dateControlStart]  GUID of a date control - start date
 * @param {String}  [dateControlEnd]    GUID of a date control - end date
 *
 * @return  {Object}                    Calculated duration in diffent output formats.
 *
 * @example
 * calculateDateDuration("E1CCFCF3E959A0BE9F5D722247C9281013BAF8C5", "339F9A576A1855BE1F072F8B9D09E622BA72CB7C");
 */
function calculateDateDuration(dateControlStart, dateControlEnd) {
    if (!dateControlStart || !dateControlEnd) {
        console.warn("Please provide start/end controls");
        return;
    }

    // datefield guids
    const guids = {
        dateCtrlStart: dateControlStart,
        dateCtrlEnd: dateControlEnd,
    };

    // get the JS date object of the two input fields
    const dateStart = ix.util.getUp(guids.dateCtrlStart).getDateObject();
    const dateEnd = ix.util.getUp(guids.dateCtrlEnd).getDateObject();

    // calculate duration between two fields
    // see: https://momentjs.com/docs/#/displaying/difference/
    const datesDiffInMs = moment(dateEnd).diff(moment(dateStart));

    // now we can format the calculated duration in diffent outputs
    // see: https://momentjs.com/docs/#/durations/
    const duration = {
        // duration in various units
        years: moment.duration(datesDiffInMs).years(),
        months: moment.duration(datesDiffInMs).months(),
        days: moment.duration(datesDiffInMs).days(),
        hours: moment.duration(datesDiffInMs).hours(),
        minutes: moment.duration(datesDiffInMs).minutes(),
        seconds: moment.duration(datesDiffInMs).seconds(),

        // duration in a different unit (instead of milliseconds)
        asYears: moment.duration(datesDiffInMs).asYears(),
        asMonths: moment.duration(datesDiffInMs).asMonths(),
        asDays: moment.duration(datesDiffInMs).asDays(),
        asHours: moment.duration(datesDiffInMs).asHours(),
        asMinutes: moment.duration(datesDiffInMs).asMinutes(),
        asSeconds: moment.duration(datesDiffInMs).asSeconds(),

        // humanized format
        // see: https://momentjs.com/docs/#/durations/humanize/
        humanized: moment.duration(datesDiffInMs).humanize(),
    };

    // print output to console
    console.table(duration);
    return duration;
}