Date Picker - Compare Date

Introduction

Ensuring that dates entered into forms are logically consistent is crucial for data accuracy. This guide provides a script that compares two date fields to ensure that the end date is later than the start date, preventing invalid date entries.

How does it work?

1. Open App Composer and create a Form that contain two Date Picker field.
   
2. Next, add Custom HTML field, then paste the code inside the field.
   
   

   <script>
   $(document).ready(function () {
     startDateField = $("input[name='start_date']");
     endDateField = $("input[name='end_date']");
     $("#submit").on("click", function (event) {
       validateDateRange(event);
     });
     function validateDateRange() {
       startDateStr = startDateField.val();
       endDateStr = endDateField.val();
       if ((startDateStr && endDateStr) && (startDateStr !== undefined && endDateStr !== undefined) ) {
         startDate = new Date(startDateStr);
         endDate = new Date(endDateStr);
         if (endDate < startDate) {
           event.preventDefault();
           alert("End Date must be larger than the Start Date. Please try again.");
           setTimeout(function () {
             $.unblockUI();
           }, 20);
           return false;
         } else {
           return true;
         }
       }
       return true;
     }
   });
   
   </script>

3. The provided script validates the dates when the form is submitted. It retrieves the values from the start date and end date fields and compares them. If the end date is earlier than the start date, an alert is shown, and the form submission is prevented. This ensures that users enter dates in a logical sequence.
4. Save and Launch it in runtime.

Expected Outcome

In the runtime, you can view a browser popup if the end date is earlier than the start date.

Video Tutorial

The video below provides a visual representation of the steps mentioned.

Sample App