This code snippet demonstrates how to use the Flatpickr library with jQuery to create a range datepicker and dynamically display the selected date range as a message in a <p> element.

fluentform-flatpickr-range.js

{
  mode: "range",
  onClose: function(selectedDates, dateStr, instance) {
    if (selectedDates.length === 2) {
      // Get the start and end dates
      var startDate = selectedDates[0];
      var endDate = selectedDates[1];

      // Calculate the number of nights
      var nightCount = Math.round(
        (endDate - startDate) / (1000 * 60 * 60 * 24)
      );

      // Define a function to format the date as the day of the week
      function formatDate(date) {
        var options = { weekday: "long" };
        return date.toLocaleDateString("en-US", options);
      }

      // Format the start and end dates
      var formattedStartDate = formatDate(startDate);
      var formattedEndDate = formatDate(endDate);

      // Create the selected date message
      var selectedDateMessage =
        "From: " + formattedStartDate + " to " + formattedEndDate + " (" + nightCount + " Nights)";

      // Check if the selected date element exists
      var $selectedDateElement = $("#selected-date");
      if ($selectedDateElement.length) {
        // Update the text content
        $selectedDateElement.text(selectedDateMessage);
      } else {
        // Create a new <p> element with the selected date message
        var $newSelectedDateElement = $("<p>", {
          id: "selected-date",
          text: selectedDateMessage,
        });

        // Append the new element after the date range picker input ex: ff_3_datetime
        $("#ff_YourFormId_datetime").after($newSelectedDateElement);
      }
    }
  },
}

Code Updated now,output will be like: From: Monday to Friday (4 Nights)