Introduction

This article discusses how to auto-populate the end date and time field based on the start date field. 

How to

The approach is to use a script that will detect when the start date changes, the script will ensure that the end date and end time fields are updated accordingly to reflect the start date plus 24 hours. It will dynamically update the End Date and Time automatically upon Start Date selection

Add required form elements

Before we proceed to the script. Add 2 Date Picker (Start Date & End Date), 1 Time Picker (End Time), and a Custom HTML form element into a form as shown in the following. 

Figure 1: Form Layout

Paste script into Custom HTML

Next, paste the following script into the custom HTML.

Figure 2: Paste script into custom HTML 

Script

This script sets up event listeners to respond when the value of the start date field changes. Upon change, it extracts the day, month, and year from the start date field, and if all three values are available, it invokes two functions: setEndDate and setEndTime.

Here's what each function does:

  1. setEndTime: It calculates the end time by adding 24 hours (and optionally 5 minutes) to the current time. The result is formatted as "HH:mm" and set as the value of the end time field.
  2. setEndDate: It calculates the end date by adding 1 day (24 hours) to the start date. The result is formatted as "MM/DD/YYYY" and set as the value of the end date field.

<script>
$("document").ready(function(){
   
   var startDate = FormUtil.getField("start_date");
   
   $(startDate).on('change', function(){
        const dateString = FormUtil.getValue("start_date"); // Get date value from start date field
        const dateParts = dateString.split('/'); // Split the string by '/'
        const month = parseInt(dateParts[0], 10); // Parse day as an integer
        const day = parseInt(dateParts[1], 10); // Parse month as an integer
        const year = parseInt(dateParts[2], 10); // Parse year as an integer
        console.log("Day:", day);
        console.log("Month:", month);
        console.log("Year:", year);
        
        if(day && month && year){
            setEndDate(day,month,year);
            setEndTime(day,month,year);
        }


   });
});
   
    function setEndTime(day , month , year){
        var end_time = FormUtil.getField("end_time");
        var currentDate = new Date();
        
        // Add 24 hours to the current time
        currentDate.setHours(currentDate.getHours() + 24);
        
        // Extract hours and minutes from the updated date
        var hours = currentDate.getHours();
        var minutes = currentDate.getMinutes() + 5; // Add 5 minutes NOTE: you may removed this
        
        // Adjust hours if minutes exceed 59
        if (minutes >= 60) {
            hours += 1;
            minutes -= 60;
        }
        
        // Format hours and minutes to ensure they are two digits
        var formattedHours = ('0' + hours).slice(-2);
        var formattedMinutes = ('0' + minutes).slice(-2);
        
        var finalTime = formattedHours + ":" + formattedMinutes;
        
        $(end_time).val(finalTime);
    }
    
    function setEndDate(day , month , year){
        var end_date = FormUtil.getField("end_date");
        
        // Create a new Date object for the start date
        var startDate = new Date(year, month - 1, day); // month - 1 because months are zero-based in JavaScript
        
        // Add 1 day (24 hours) to the start date
        startDate.setDate(startDate.getDate() + 1);
        
        // Extract the year, month, and day from the updated date
        var newYear = startDate.getFullYear();
        var newMonth = startDate.getMonth() + 1; // Adding 1 because months are zero-based
        var newDay = startDate.getDate();
        
        // Adjust month and day if necessary to ensure they are two digits
        if (newMonth < 10) {
            newMonth = '0' + newMonth;
        }
        if (newDay < 10) {
            newDay = '0' + newDay;
        }
        
        var endDateValue = newMonth + '/' + newDay + '/' + newYear;
        
        $(end_date).val(endDateValue);
    }


</script>

Modification (If you are not following the example)

#1

Inside the event-listener

        var startDate = FormUtil.getField("start_date");
Replace start_date with the id of the start date in your form.


#2

Inside setEndTime() function

        var end_time = FormUtil.getField("end_time");
Replace end_time with the id of the end time in your form.


#3

Inside setEndDate() function

        var end_date = FormUtil.getField("end_date");
Replace end_date with the id of the end date in your form.


#4

Inside setEndTime() function

        var minutes = currentDate.getMinutes() + 5; // Add 5 minutes NOTE: you may removed this
You may configure the minute accordingly if you don't want to have an additional 5 minutes.

Result

Figure 3: Result showing End Date & Time updated upon Start Date selection

Sample App
APP_kb_dx8_auto_populate_date.jwa


  • No labels