My date input field is causing a problem on a Hebrew (RTL) website. Strangely, in Firefox, the calendar icon displays correctly on the left side, but in Chrome and other browsers, it does not.
The code I am using is:
<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';
}
});
});