Datetime Option

Hi there,

I need for my users to select and set two datetime fields so I can determine the number of hours slept. I also need to use the datetime fields to average out the time they went to bed and obtain the average time they woke up. I can't find any options on the date field that would allow the selection of time.

(1) Does this need to be added to the frontend webassets section as javascript code?
(2) If so, how do I create a field to contain both date and time, or do I need to have them separate (one as a date field and the other as a number field with custom validation [regex] included)?
(3) If I do separate them, any idea as to how I can calculate both the date and time together to obtain the number of hours slept and average the time they went to bed or woke up?

Any help would be greatly appreciated.

Nelson

Hi there, 

No need to reply, I figured it out.

// JS FUNCTION TO DETERMINE THE NUMBER OF SLEEP HOURS BETWEEN TWO DATES AND TIMES (COMBINED)
jQuery(document).ready(function() {
    console.log('FEWA script loaded');
    const enddateFieldID = '68'; // Visforms end date field ID of field list
    const endtimeFieldID = '69'; // Visforms end time (text) field ID of field list
    const startdateFieldID = '66'; // Visforms start date field ID of field list
    const starttimeFieldID = '67'; // Visforms start time (text) field ID of field list

    function calculateHours() {
        // Get values from input fields
        const startDateValue = jQuery(`#field${startdateFieldID}`).val();
        const startTimeValue = jQuery(`#field${starttimeFieldID}`).val();
        const endDateValue = jQuery(`#field${enddateFieldID}`).val();
        const endTimeValue = jQuery(`#field${endtimeFieldID}`).val();

        // Combine date and time strings
        const startDateTimeString = startDateValue + 'T' + startTimeValue;
        const endDateTimeString = endDateValue + 'T' + endTimeValue;

        // Create Date objects
        const startDate = new Date(startDateTimeString);
        const endDate = new Date(endDateTimeString);

        // Calculate time difference in milliseconds
        const timeDifference = endDate - startDate;

        // Convert milliseconds to hours
        const hoursDifference = timeDifference / (1000 * 60 * 60);

        // Display the result
        jQuery(`#field70`).val(hoursDifference);

        // If you want to log the result to console
        //console.log('Number of hours between the two dates:', hoursDifference);
    }

    // Call the function when any of the relevant fields change
    jQuery(`#field${startdateFieldID}, #field${starttimeFieldID}, #field${enddateFieldID}, #field${endtimeFieldID}`).on('change', calculateHours);
    
    // You can also call the function initially if needed
    // calculateHours();
});

Gotta love ChatGPT! LOL. 

Take care, Nelson

Hello Nelson,

Thank you very much for sharing your great solution!
I think your idea with the additional text field for entering the time is great.
Your code is well structured and also very readable.

I plan to include more interesting code examples on the FEWA examples documentation page.
Examples for solving requirements with the Frontend Web Assets:
docs.joomla-4.visforms.vi-solutions.de/e...-frontend-web-assets

I will take the code examples from the answers in the forum.
If you don't mind, I would like to include your example too.
Is this o.k. for you?

Take care, Ingmar

Hi Ingmar,

What a great idea. If it will help someone else, by all means! I'm starting to see the power of Visforms. Great product. Thank you.

Nelson

Nelson,

I have included this example in the documentation.

Record a time period with date fields and time fields:
docs.joomla-4.visforms.vi-solutions.de/e...elds-and-time-fields

There is an issue for developing the documentation:
Issue [VF-938] Docu: FEWA: Add examples

Thank you again for the contribution!

Kind regards, Ingmar