长期以来，我一直在努力更改 Datepicker Anchor Position，但没有得到任何解决此问题的方法。
datepicker的图片如下，
这里我想将 anchor 位置从左侧更改为中间，是否可以这样做？
我试图通过使用 datepicker 的 Orientation 属性来修复它，比如
$('body').on('focus', "#datepickerDay", function () {
$(this).datepicker({
autoclose: true,
endDate: Infinity, format: 'dd-mm-yyyy', orientation: 'auto '
}).prop('type', 'text').on('changeDate', function (ev) {
if (Datepickerflag == 0) {
var newDate = new Date(ev.date);
splitValidation(newDate);
Datepickerflag = 1;
}
});;
Datepickerflag = 0;
});
Html 代码是，
var input = document.createElement("input");
input.type = "text";
input.id = "datepickerDay";
input.style.width = "70px";
input.style.marginRight = "45px";
input.style.borderLeft = "none";
input.style.borderRight = "none";
input.style.borderTop = "none";
input.style.borderWidth = "2px";
input.style.position = "absolute";
input.style.right = "45px";
input.style.top = "155px";
document.getElementById("leftright").appendChild(input);
我也尝试过应用另一个选项，但我还没有找到将 anchor 位置设置为中心的属性。
提前致谢...!
最佳答案
将 anchor 更改为中间:
1) 在您的本地主机上创建一个 .css 文件(我们将其命名为“custom.css”) 2) 打开 custom.css 3) 粘贴这两行以将日期选择器的 anchor (及其阴影)从一侧移动到中间:
.bootstrap-datetimepicker-widget.pull-right:after {
left: auto;
right: 50%;
}
.bootstrap-datetimepicker-widget.pull-right:before {
left: auto;
right: 50%;
}
注意:我所做的更改是 right:50%，之前它以像素为单位，这就是箭头出现在一侧而不是中间的原因。 p>
4) 转到具有日期选择器的 .php 文件，并在部分包含您的 custom.css 文件。 必须在包含 bootstrap.css 之后:
<head>
<link rel="stylesheet" href="ruta/estilos.css" type="text/css" media="all">
</head>
注意:您可以只打开 boostrap datepicker .css 文件并对其进行编辑，但不建议(这是一种不好的做法)使用您的自定义样式修改原始源，这就是我们创建另一个 .css 的原因文件将包含您自己的文件和现有 Bootstrap 样式的自定义。
您可以在此处查看我的代码的工作示例:anchor on the middle
我将 Luis Cruz 提供的示例作为基础 datepicker .在那里你会找到 bootstrap datepicker .css 文件的源代码。
如果您有不同的datepicker 文件(这意味着它将有不同的类 名称)。您只需使用浏览器->开发人员工具，然后运行您的站点，打开日期选择器，然后使用开发人员工具“选择”日期选择器中的 anchor 并在开发人员工具窗口的右侧，您将了解它是如何在您的 bootstrap datepicker css 文件 中命名 anchor 的。
希望对您有所帮助!
关于jquery - 如何将 Bootstrap Datepicker anchor 位置更改为居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48139102/