如何将 Bootstrap Datepicker Anchor Position 更改为居中？
Posted
技术标签:
【中文标题】如何将 Bootstrap Datepicker Anchor Position 更改为居中？【英文标题】：How to change Bootstrap Datepicker Anchor Position to center? 【发布时间】：2018-06-16 18:30:28 【问题描述】：由于长期以来我一直在努力更改 Datepicker 锚位置，但没有得到任何解决此问题的方法。
datepicker的图片如下，
这里我想将锚点位置从左到中更改可以吗？
我尝试通过使用 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);
我也尝试过应用另一个选项，但我还没有找到将锚点位置设置为中心的属性。
在此先感谢..！
【问题讨论】：
您的意思是打开引导程序，然后在日期选择器出现时。锚必须在“月”？ 不正好在月份，在输入中间。 是的，我尝试过应用 css。但它不会工作。 你能用 bootstrap datepicker 的示例 sn-p 来编辑问题吗？我想我有解决办法 我需要一个“工作日期选择器”，这就是我问你一个 sn-p 的原因。您可以在编辑工具上创建一个 sn-p 【参考方案1】：要将锚点更改为中间：
1) 在您的本地主机上创建一个 .css 文件（让我们将其命名为“custom.css”） 2）打开custom.css 3）粘贴这两行以将日期选择器的锚点（及其阴影）从一侧移动到中间：
.bootstrap-datetimepicker-widget.pull-right:after
left: auto;
right: 50%;
.bootstrap-datetimepicker-widget.pull-right:before
left: auto;
right: 50%;
注意：我更改的属性是 right:50% 之前的像素，这就是为什么箭头出现在一侧而不是中间的原因。 p>
4) 转到您拥有 datepicker 的 .php 文件，并在部分中包含您的 custom.css 文件。 必须在包含 bootstrap.css 之后：
<head>
<link rel="stylesheet" href="ruta/estilos.css" type="text/css" media="all">
</head>
注意：您可以打开 boostrap datepicker .css 文件并对其进行编辑，但不建议（这是一种不好的做法）使用您的自定义样式修改原始源代码，这就是我们创建另一个 .css 的原因该文件将包含您自己的文件和现有引导样式的自定义。
您可以在此处查看我的代码的工作示例：anchor on the middle
我以Luis Cruz 提供的示例为基础datepicker。在那里您将找到引导日期选择器 .css 文件的来源。
如果您有不同的 datepicker 文件（这意味着它将有 不同的类 名称）。您只需打开浏览器->开发者工具，然后运行您的网站，打开datepicker，然后使用开发者工具“选择”datepicker 中的锚点 并在开发人员工具窗口的右侧，您将了解它是如何在 bootstrap datepicker css 文件中命名锚点的。
希望对你有帮助！
【讨论】：
我只想将锚点位置从左侧更改为中间。而已。因为我刚刚检查了它出现在右边的例子。 我也可以使用内部 css 吗？ 没问题的兄弟！以上是关于如何将 Bootstrap Datepicker Anchor Position 更改为居中？的主要内容，如果未能解决你的问题，请参考以下文章
我如何将 Bootstrap 3 Datepicker 自定义为仅没有时间戳的日期
如何将 bootstrap-datepicker 作为 MVC 5 中的组件安装？
如何设置ui bootstrap datepicker的日期值
Bootstrap Datepicker - 如何将值发送到 URL？