t1m0n / air-datepicker

Lightweight, dependency-free JavaScript datepicker.
https://air-datepicker.com
MIT License
2.58k stars 1.36k forks source link

Inline DatePicker bug with range selection updating end date #609

Open amineoutmal opened 1 month ago

amineoutmal commented 1 month ago

Issue Description:

When selecting a date range in the application and then unselecting the end date of the range, followed by selecting a new end date, the application behaves unexpectedly. Instead of updating the end date to the newly selected date, it retains the previously unselected end date.

Steps to Reproduce:

Navigate to the date range selection feature in the application. Select a start date and an end date to define a date range. Click on the previously selected end date to unselect it. Select a new end date.

Expected Behavior:

After unselecting the end date and selecting a new end date, the application should update the end date of the date range to the newly selected date.

Actual Behavior:

Instead of updating the end date to the newly selected date, the application retains the previously unselected end date, causing confusion and unexpected behavior for users.

Additional Information:

This issue affects the usability and functionality of the date range selection feature, impacting the user experience negatively. It is observed consistently across different browsers and devices.

Workaround:

As a temporary workaround, users can manually deselect the previously selected end date before selecting a new one. However, this workaround is cumbersome and not intuitive for users.

my code :

inlineDatePicker = new AirDatepicker('#datepickerInline', { locale: { days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'], daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'], daysMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'], months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], monthsShort: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jui', 'Jui', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'], today: "Aujourd'hu", clear: 'réinitialiser', }, inline: true, dateFormat: 'dd/MM/yyyy', minDate: mindate, maxDate: maxdate, range: true, dynamicRange: true, toggleSelected({date, formattedDate, datepicker}) { disableDates(date); return true; }, onSelect({date, formattedDate, datepicker}) { $("#from").val(formattedDate[0]); $("#to").val(formattedDate[1]); disableDates(date[0]);

  $('.date_debut_error').hide();
  $('.date_fin_error').hide();

  if($("#from").val() != ""){
    updateMaxMinDate(date[0]);
  }else if($("#from").val() == ""){
    resetMinMaxDate();
  }

  if(formattedDate[0] != ""){
    $("#from").removeClass('error_border');
  }

  if(formattedDate[1] != "" && formattedDate[0] != ""){
    $("#to").removeClass('error_border'); 
  }

} });

pictures :

Capture d’écran 2024-05-13 à 11 43 12 Capture d’écran 2024-05-13 à 11 43 23 Capture d’écran 2024-05-13 à 11 42 58