...
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:
- 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.
- 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.
| Code Block |
|---|
<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
| Code Block |
|---|
var startDate = FormUtil.getField("start_date"); |
Replace start_date with the id of the start date in your form.
#2
Inside setEndTime() function
| Code Block |
|---|
var end_time = FormUtil.getField("end_time"); |
Replace end_time with the id of the end time in your form.
#3
Inside setEndDate() function
| Code Block |
|---|
var end_date = FormUtil.getField("end_date"); |
Replace end_date with the id of the end date in your form.
#4
Inside setEndTime() function
| Code Block |
|---|
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
...