Wrong arrow orientation/position

[stefanbruvik]

Seems the arrow is pointing in the wrong direction. This happens whether orientation is set to auto or to something explicitly:

Html output:

Now, if I manually edit this html in dev tools, and change datepicker-orient-bottom to datepicker-orient-top, the arrow points in the correct direction:

Setting the orientation explicitly to top left in my code, yields unwanted results, though:

[prasannatm]

Same Issue when I try to use this inside bootstrap modal where also top is set to 0 instead of that particular input position top . Any fix to this would be great to continue using this plugin. Thanks 👍

[sergey-guk-dev]

I also encountered this problem.

[AlfaroLore]

I have the same issue

[stephane-lapointe]

I have the same issue

[machinefriendly]

I have the same issue, I don't have a solution to correct that arrow direction, I just remove it by removing below-shown codes from the .css file, waiting for a final solution from others:
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #999;
border-top: 0;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-top: 0;
position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
right: 7px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
top: -7px;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
top: -6px;
}
.datepicker-dropdown.datepicker-orient-top:before {
bottom: -7px;
border-bottom: 0;
border-top: 7px solid #999;
}
.datepicker-dropdown.datepicker-orient-top:after {
bottom: -6px;
border-bottom: 0;
border-top: 6px solid #fff;
}

[joelklingler]

@machinefriendly I have the same issue and remove the arrow as well. There is an easier way to achieve this without the need to modify the original CSS-file. Just add the following CSS and the arrow shouldn't be displayed anymore:

.datepicker-dropdown:after, .datepicker-dropdown:before { display: none !important; }

[joelklingler]

I found a way to fix it without the need to modify any css.
I had the same issue as @stebru described. Using the datepicker-orient-top-class the arrow was pointing in the wrong direction. When I modified the html and replaced the class with datepicker-orient-bottom it worked as desired.

The following JS modifies the classes once the datepicker is shown:

$(document).on('show', $('.datepicker').datepicker(), function() {
  $('.datepicker').removeClass('datepicker-orient-top');
  $('.datepicker').addClass('datepicker-orient-bottom');
});

[FirstVertex]

I noticed this behavior when I updated my installation of Bootstrap Datepicker. I updated the .js file but forgot to also update the .css file. I had wrong arrow. Once I updated also the css file to latest version, my arrows work correctly now.

[voeurnchy]

The same issue, I fixed with this css

.datepicker-dropdown.datepicker-orient-bottom:before,
.datepicker-dropdown.datepicker-orient-bottom:after{
    transform: rotate(180deg);
    bottom: 100% !important;
}

[InaFK]

Cross-browser and for top orientation:
.datepicker-dropdown.datepicker-orient-bottom:before,
.datepicker-dropdown.datepicker-orient-bottom:after,
.datepicker-dropdown.datepicker-orient-top:before,
.datepicker-dropdown.datepicker-orient-top:after {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

.datepicker-dropdown.datepicker-orient-bottom:before,
.datepicker-dropdown.datepicker-orient-bottom:after {
bottom: 100% !important;
}
.datepicker-dropdown.datepicker-orient-top:before,
.datepicker-dropdown.datepicker-orient-top:after {
top: 100% !important;
}