5

我正在为 Web 项目使用 Bootstrap 日期选择器。这是日期选择器：

https://github.com/eternicode/bootstrap-datepicker

根据文档（在上述链接的页面底部），我应该将 rtl:true 用于 RTL 语言。我试过了，但它不起作用。基本上，它没有任何作用。这是我的代码。

<html>
    <head>
        <meta charset="utf-8" /> 

        <link rel="stylesheet" href="bootstrap.css" />
        <link rel="stylesheet" href="datepicker.css" />
        <script src="jquery-1.10.1.js"></script>
        <script src=bootstrap.js"></script>
        <script src="bootstrap-datepicker.js"></script>

    </head>

    <body>

        <input type="text" id="dp2">

        <script>
            $('#dp2').datepicker({
                rtl: true
            });
        </script>
    </body>
</html>

注意：添加特定于语言环境的 javascript 或指定如下语言不会使 RTL 根据我的测试工作。它仅更改语言字符串，但不会使日期数字等内容从右到左。

<script type="text/javascript" src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>

$('.datepicker').datepicker({
    language: 'XX' // as defined in bootstrap-datepicker.XX.js
});

有谁知道出了什么问题和解决方法？谢谢！

4

5 回答 5

7

如果您不想更改语言并需要修复它，您可以通过在 CSS 文件中添加一些代码来修复它

.datepicker-dropdown {max-width: 300px;}
.datepicker {float: right}
.datepicker.dropdown-menu {right:auto}

注意：此代码将覆盖默认代码，因此将其放在文件下方即可工作

于 2018-03-09T18:50:49.747 回答
6

我在挖掘代码后让它工作了。为了使 RTL 工作，您需要加载如下脚本：

<script type="text/javascript" src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>

加载的javascript必须有这样的东西

$.fn.datepicker.dates['XX'] = {
.....
        rtl: true
    };

此外，您的 javascript 必须具有以下内容：

$('.datepicker').datepicker({ language: 'XX' })

如文档所述，上面似乎不需要 rtl:true 。

希望这对其他人有帮助。

于 2013-08-13T05:04:28.660 回答
2

还要添加此 CSS 以防止 RTL 屏幕上出现超大尺寸。

.datepicker-dropdown {max-width: 300px;}
于 2017-02-22T06:19:03.370 回答
0

添加此自定义样式并确保在引导后加载它

.datepicker {
   float: right
}
.datepicker.dropdown-menu {
   right:auto
}

注意：如果你发现下拉框离输入框太远，试着把输入框的宽度变小。

于 2017-05-19T12:42:40.627 回答
0

我通过在 Site.css 文件中添加这些行来解决这个问题：

  /*To display datepicker in RTL*/
.datepicker-dropdown {
    max-width: 300px;
}

.datepicker {
    float: right
}

.datepicker.dropdown-menu {
        right: auto
    }

并在 bootstrap-datepicker.js 文件中编辑 rtl = true 。

于 2018-12-16T07:34:29.290 回答