RTL 布局中的引导日期选择器无法正常工作

Posted 2023-05-07

【中文标题】RTL 布局中的引导日期选择器无法正常工作

【英文标题】：bootstrap datepicker in RTL layout is not working properly

【发布时间】：2017-06-30 22:48:52

【问题描述】：

，我正在使用这个引导日期选择器 http://bootstrap-datepicker.readthedocs.io 这是我在 page.cshtml 中的代码

<div class="form-group" id="data_3">
  <label class="col-md-3 control-label">@Resources.ResourceLanguages.BirthDate</label>
  <div class="input-group date col-md-8" data-provide="datepicker">
    <div class="col-md-1"></div>
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span> @Html.TextBoxFor(m => m.BirthDate, "0: dd/MM/yyyy", new  @class = "form-control", type = "text", placeholder = @Resources.ResourceLanguages.BirthDate, ReadOnly = "" ) @Html.ValidationMessageFor(m
    => m.BirthDate)
  </div>
</div>

这是我的 javascript 代码

$(document).ready(function() 
  $('#data_3 .input-group.date').datepicker(
    startView: 2,
    todayBtn: "linked",
    keyboardNavigation: false,
    forceParse: false,
    autoclose: true,
    orientation: "top left"
  );
);

这是我遇到的问题，我尝试了互联网上的所有解决方案，但没有任何效果，有没有解决这个问题的方法？ bootstrap datepicker 支持 RTL 布局吗？

【参考方案1】：

将此样式添加到样式的末尾以重载当前样式

.datepicker 
   direction: rtl;

.datepicker.dropdown-menu 
   right: initial;

或者您可以将其添加到布局的头部

 <style>         
      .datepicker 
        direction: rtl;
                   
    .datepicker.dropdown-menu 
right: initial;             
           
    </style>