如何更改Bootstrap Datetimepicker(by eonasdan)显示方向

使用(开源)第三方插件的优点是, 你无需重新发明轮子, 因为你可以找到有用的代码片段, 你可以将这些代码简单地添加到项目中并使用, 而无需你进行任何修改。 Bootstrap Datetimepicker是其中的一个插件, 如果你使用的是Bootstrap 3或4, 则可以轻松地将其嵌入应用程序中。但是, 此小部件最着名的问题之一是当你的项目已经有很多自定义类(可能不是你创建的, 而是其他人创建的)时的定位, 这使得代码更易于阅读和维护。如果出于某种原因在某些对话框中实现了选择器, 则选择器将不使用自动定向, 而是始终使用底部定向。

最简单的解决方案, 如果你不想弄乱更多的类或自定义插件的样式, 则可以使用widgetPositioning属性简单地强制datepicker的widget方向：

$('#your-input').datetimepicker({
    widgetPositioning:{
        horizontal: 'auto', vertical: 'bottom'
    }
});

该属性接受具有2个属性的单个对象, 这些属性接受以下值：

• 水平：“自动”, “左”, “右”
• 垂直：”自动”, “顶部”, “底部”

如果未指定, 则此属性的默认值为：

{
    horizontal: 'auto', vertical: 'auto'
}

有关Datetimepicker的小部件定位属性的更多信息, 请在此处阅读文档。

编码愉快！