阿拉伯语浏览器中HTML5 date输入框占位符反转问题修复方法

浏览器显示语言切换为阿拉伯语后，原生HTML5 type="date" 输入控件的占位提示文本出现完全反转的显示异常，不符合使用要求，异常展示效果如下：

<div class="row">
    <div class="col-lg-6 col-sm-6">
        <div class="col-lg-9 col-sm-9">
            <input class="form-control" asp-for="@Model.EndDate" placeholder="mm-dd-yyyy"
                   autocomplete="off" type="date" id="endDate" max="2200-12-31">
        </div>
        <div class="col-lg-3 col-sm-3">
            <label>إلى</label>
        </div>
    </div>
    <div class="col-lg-6 col-sm-6">
        <div class="col-lg-9 col-sm-9">
            <input class="form-control" asp-for="@Model.StartDate" placeholder="mm-dd-yyyy"
                   autocomplete="off" type="date" max="2200-12-31" id="startDate">
        </div>
        <div class="col-lg-3 col-sm-3">
            <label>من</label>
        </div>
    </div>
</div>

1. 阿拉伯语属于从右到左（RTL）书写的语言，浏览器切换到阿拉伯语环境后，会自动启用RTL双向文本排版规则，对页面内的文本、控件内容做方向适配。
2. 按照HTML规范，type="date" 类型输入框的占位提示是浏览器根据当前系统/浏览器语言自动生成的，开发者手动写的placeholder属性在主流现代浏览器中不会生效。你看到的反转文本是浏览器自动生成的日期格式提示，在双向文本算法判定时出现逻辑错误，把LTR（从左到右）排列的日期格式串按RTL规则做了反转。

• 方案1：强制指定date输入框的排版方向为LTR（成本最低，最常用）
  给所有date类型的input标签添加dir="ltr"属性，强制控件内部文本按从左到右规则排版，从根源上避免双向算法判定错误，修改后的输入框代码示例：

  <input class="form-control" asp-for="@Model.EndDate" placeholder="mm-dd-yyyy"
         autocomplete="off" type="date" id="endDate" max="2200-12-31" dir="ltr">
  

  如果需要全局生效，可以直接加一段CSS统一配置，不需要逐个改标签：

  input[type="date"] {
    direction: ltr;
    unicode-bidi: embed;
  }
  

• 方案2：自定义占位提示逻辑，绕开浏览器原生渲染
  如果需要完全控制占位提示的内容和显示效果，可以通过CSS+JS实现自定义占位层：检测输入框值为空时，在输入框上层覆盖自定义的格式提示文本，手动指定该提示层的排版方向为LTR，完全规避浏览器原生占位提示的不可控问题。
• 方案3：适配RTL语言使用习惯
  如果站点本身需要完整适配阿拉伯语等RTL语言区域，可以将日期提示替换为当地用户习惯的日期格式，配合dir属性调整控件对齐方式、内部排版规则，符合本地化使用要求。

内容的提问来源于stack exchange，提问作者Waleed.alhasan