HTML5 input date placeholder in Arabic browser is totally reversed and looks unacceptable

and this is the markup for each one:

  <input  lang="en-us"  type="date" placeholder="mm-dd-yyyy" id="endDate" max="2200-12-31">

How to fix the revered placeholder text??

CodePudding user response：

I succeeded to solve, by changing the control to be text and then applying bootstrap datepicker library on it , Just like in this demo:

https://jqueryui.com/resources/demos/datepicker/localization.html

$("#endDate").datepicker({ dateFormat: 'm-d-yy' }).datepicker($.datepicker.regional["ar"]);
$("#startDate").datepicker({ dateFormat: 'm-d-yy' }).datepicker($.datepicker.regional["ar"]);

<input  lang="en-us" asp-for="@Model.EndDate" type="text" placeholder="شهر-يوم-سنة" autocomplete="off" id="endDate" max="2200-12-31">
                                   
<input  lang="en-us" asp-for="@Model.StartDate" type="text" placeholder="mm-dd-yyyy" autocomplete="off" max="2200-12-31" id="startDate" value="">