Search code examples
htmlcssgoogle-chromebootstrap-5microsoft-edge

Date input field calendar icon position issue in RTL direction for Chrome and other browsers

I'm having an issue with my date input field on a website that's in Hebrew (RTL). In Firefox, the calendar icon appears on the left side as expected, but in Chrome and other browsers, it doesn't.

I'm using:

<input type="date" class="form-control" name="adjDate" id="adjDate">

html[dir="rtl"] .form-control[type="date"]::-webkit-calendar-picker-indicator {
  right: auto;
  left: 0;
}

document.addEventListener('DOMContentLoaded', function() {
  const dateInputs = document.querySelectorAll('html[dir="rtl"] .form-control[type="date"]');
  dateInputs.forEach(input => {
    const picker = input.querySelector('::-webkit-calendar-picker-indicator');
    if (picker) {
      picker.style.right = 'auto';
      picker.style.left = '0';
    }
  });
});
Solution

  • It's a known issue in chromium: https://issues.chromium.org/issues/41489719. You can also provide feedback in that thread.

    If you want to have a workaround for now, you can add CSS styles to chromium specific browsers to have the same behavior as Firefox:

    <!DOCTYPE html>
<html dir="rtl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    @supports (contain: paint) and (not (-moz-appearance: none)) {
      .form-control[type="date"] {
        padding-left: 1.5em; /* Adjust if needed */
        text-align: right;
      }
      .form-control[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        left: 0.2em; /* Adjust if needed */
        right: auto;
      }
    }
  </style>
</head>

<body>
  <input type="date" class="form-control" name="adjDate" id="adjDate" style="position: relative;">
</body>

</html>