Question

我正在为一个Web项目使用Bootstrap datepicker。这是datepicker：

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
});

有谁知道出了什么问题和修复？谢谢！

Answer 1

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

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

加载的javascript必须具有类似的内容

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

此外，您的javascript必须包含以下内容：

$（ '日期选择器'）。日期选择器（{ 语言：'XX' }）

正如文档所说，上面似乎不需要rtl：true。

希望这有助于其他人。

Answer 2

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

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

注意：此代码将覆盖默认值，但它会在文件下方

Answer 3

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

.datepicker-dropdown {max-width: 300px;}

Answer 4

添加此自定义样式并确保在引导程序

之后加载它

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

注意：如果您发现输入字段的下拉列太远，请尝试使输入字段的宽度变小。

Answer 5

我通过在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。

Bootstrap datepicker：RTL不起作用

5 个答案: