[RTL] Datepicker dropdown misaligned due to incorrect width calculation

Author: MateuszCzoCreated Sep 9, 2025Updated Sep 9, 2025

https://github.com/uxsolutions/bootstrap-datepicker/blob/722dc29432e89e048e5677b51fb4cfd8bbdab13c/js/bootstrap-datepicker.js#L748

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

  1. Set up datepicker with dir="rtl" and Arabic locale.
  2. Attach datepicker to an input inside an input-group with a calendar icon.
  3. 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