The advantage of using (open source) third party plugins, is that you don't need to reinvent the wheel as you can find useful pieces of code that you can simply add into your project and use without even needing modification from your side. The Bootstrap Datetimepicker is one of those plugins that, if you are using Bootstrap 3 or 4, you can simply embed in your app easily. However, one of the most known problems with this widget is the positioning when your project already has a lot of custom classes that maybe you didn't created but someone else, which makes the code easier to read and maintain. If for some reason the picker is being implemented in some kind of dialog, the picker won't use the auto orientation but always with orientation to the bottom.
The simplest solution, if you don't want to mess up with more classes or customizing the style of the plugin, you can simply force the widget orientation of the datepicker with the widgetPositioning property:
$('#your-input').datetimepicker({
widgetPositioning:{
horizontal: 'auto',
vertical: 'bottom'
}
});The property accepts a single object with 2 properties that accept the following values:
- horizontal: 'auto', 'left', 'right'
- vertical: 'auto', 'top', 'bottom'
The default values of this property if not specified are:
{
horizontal: 'auto',
vertical: 'auto'
}For more information about the widget positioning property of the Datetimepicker, please read the docs here.
Happy coding !
