[RTL] Datepicker dropdown misaligned due to incorrect width calculation
Description
When using the datepicker with dir="rtl" and Arabic locale, the dropdown is incorrectly positioned. The issue is caused by the width calculation inside the place() method:
var right = windowWidth - (left + width);
Here, width refers to the component (often the calendar icon, ~32px) rather than the full calendar width. As a result, the dropdown shifts too far to the left, equal to the difference between the input width and the icon width.
Steps to Reproduce
- Set up datepicker with dir="rtl" and Arabic locale.
- Attach datepicker to an input inside an input-group with a calendar icon.
- Open the calendar dropdown.
Expected Behavior: The datepicker dropdown should align correctly with the input field in RTL layouts.
Actual Behavior: The dropdown is misaligned, shifted left by the difference between the input width and the icon width.
Root Cause: In place(), the right position is calculated using width (icon width) instead of calendarWidth (actual dropdown width).
Fix Replace: var right = windowWidth - (left + width); with: var right = windowWidth - (left + calendarWidth);
Environment Library: bootstrap-datepicker (or specify version) Direction: RTL (dir="rtl") Locale: Arabic Browser: [e.g. Chrome 127, Firefox 118]
Source: uxsolutions/bootstrap-datepicker