bug: date input field doesn't reflect on RTL

[khaled-badenjki]

Reproduction URL (Required)

https://daisyui.com/components/input/?lang=ar

What version of daisyUI are you using?

5.0.28

Which browsers are you seeing the problem on?

Chrome

Describe your issue

expected: In RTL, the date input field is expected to be a flipped version from the LTR, and have the date shown on the right hand side, and the calendar icon on the left hand side

current behavior: date input field doesn't change direction when switching from LTR to RTL

images from https://daisyui.com:

LTR (english)

RTL (arabic)

[github-actions[bot]]

Thank you @khaled-badenjki for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[pdanpdan]

It is a bug in chrome: https://issues.chromium.org/issues/41489719

[sulimanbenhalim]

Try implementing this RTL date input fix as custom CSS in your project for now :)

You could also ask @saadeghi to consider adding this fix to the daisyUI package I made a working example here: https://play.tailwindcss.com/cePBAzzKd4

[khaled-badenjki]

Try implementing this RTL date input fix as custom CSS in your project for now :)

You could also ask @saadeghi to consider adding this fix to the daisyUI package I made a working example here: https://play.tailwindcss.com/cePBAzzKd4

@saadeghi would you consider to add this fix?

[sulimanbenhalim]

@khaled-badenjki FYI this is a Chrome bug, not daisyUI. If Chrome patches it later, this fix could break existing styles. If @saadeghi approves, I'll add this CSS to input.css:

[dir="rtl"] &[type="date"] {
  &::-webkit-calendar-picker-indicator {
    inset-inline-end: 0;
    inset-inline-start: 0.75rem;
  }
  
  padding-inline-end: clamp(14rem, 20%, 12rem);
  
  @media (max-width: 380px) {
    padding-inline-end: 62%;
  }
}

[saadeghi]

I don't think we should change this because even if the language is RTL, the numbers, dates and time format of HTML inputs are still LTR. (Numbers in RTL languages like Arabic, Farsi, etc are LTR) And when the content is LTR and aligned to left, it makes sense for the icon to be on the other side.

@sulimanbenhalim's solution works tho, if you want to customize the style.

Let me know if you have a question.