如何将 Bootstrap Datepicker Anchor Position 更改为居中？答案

【问题标题】：How to change Bootstrap Datepicker Anchor Position to center?如何将 Bootstrap Datepicker Anchor Position 更改为居中？
【发布时间】：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

标签： jquery html css twitter-bootstrap datepicker

【解决方案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 吗？
没问题的兄弟！