How to check dropdown state of bootstrap datepicker?

I know the following checks the visibility of the entire widget but is there a way to check only the visibility/state of the dropdown calendar?

$("#datePicker").datetimepicker().is(":visible") 

EDIT: the widget functions as expected and is contained in a modal with only format and positioning set.

$('#datePicker').datetimepicker({
    format: 'MM/DD/YYYY',
    widgetPositioning: {
        horizontal: 'auto',
        vertical: 'top'
    }
});

HTML when calendar dropdown is open/visible:

<div class="bootstrap-datetimepicker-widget dropdown-menu usetwentyfour top pull-right" style="display:block;">...</div>
<span class="input-group-addon toggleCalendar">
    <span class="glyphicon glyphicon-calendar">...</span>
</span>

If you had inspected the code, you would easily had found a selector to target the dropdown.

Hit CTRL+SHIF+C next time ;)

Try with this :

console.log( "Dropdown visible: " + $(document).find(".datepicker-dropdown").is(":visible") );

Here is a demonstration in CodePen.

---

EDIT

Previous was for Bootstrap DatePicker...
Here is the same answer for BootStrap DateTimePicker.

The answer is basically the same, only the selector to target the calendar differs.
In this case, this is .dropdown-menu.

console.log( "Dropdown visible: " + $(document).find(".dropdown-menu").is(":visible") );

Desmonstration in CodePen.