DateRangePicker header text

[Julian Calderon]

Hi, we are trying to have the text in the daterange picker to read '5 nights' instead of '6 days'. So the days minus one.
The text can be changed easy enough, but the value we can't change. The 'select' event is firing before the 'updateHeader' so any change we make, is overwritten.

Is there another event we can use, or can we add a handler or the updateHeader?

It woud make sence to have access to this text in a non hacky way. Or to have a custom function that will return the number of days selected (for example if you want to count only work days).

Thanks!

[Buvana Sathasivam]

You can calculate the working days in the selected date range using the select event of the DateRangePicker component, as shown in the code snippet below.

var daterangepicker = new ej.calendars.DateRangePicker({

  select: function (args) {

    if (args.endDate != null) {

      var start = new Date(args.startDate);

      var end = new Date(args.endDate);

 

      // Variables to store the working days count and the current date

      var workingDays = 0;

      var currentDate = start;

 

      // Loop through each day from start to end date

      while (currentDate <= end) {

        // Check if the current day is not a weekend (Saturday or Sunday)

        if (currentDate.getDay() !== 0 && currentDate.getDay() !== 6) {

          workingDays++;

        }

 

        // Move to the next day

        currentDate.setDate(currentDate.getDate() + 1);

      }

 

      console.log('Working Days :' + workingDays);

      setTimeout(() => {

        document.querySelector('.e-day-span').innerHTML =

          workingDays + ' Working days';

      }, 1);

    }

  },

});

daterangepicker.appendTo('#daterangepicker');

Sample: https://stackblitz.com/edit/jrbdch?file=index.js

[Julian Calderon]

Thank You for the reply!

The use of setTimeout to circumvent the Event handler ordering looks like hacky way of doing it. I suppose it's fine for now.

Thanks!

[UdhayaKumar Duraisamy]

We appreciate your concern about using setTimeout as a workaround for event handler ordering. While it may seem hacky, we value your input and will take it into consideration. If you have any further questions or suggestions, please let us know.

Thanks again for reaching out!