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 :+1:

[eventpromo]

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; }