own style in input box (no bootstrap)
Input box has an own style and the parent element div have to be position: relative style in order the calendar open the right position.
<style> .input-box-container { position: relative; } .input-box { padding: 4px 8px; border-radius: 4px; border: 1px solid #ccc; font-size: 16px; } </style> <!-- add the following snippet inside your template --> <div class="input-box-container"> <input class="input-box" placeholder="Click to select a date" angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" [(ngModel)]="model" [options]="myDpOptions" #dp="angular-mydatepicker" (dateChanged)="onDateChanged($event)"/> </div>import {IAngularMyDpOptions, IMyDateModel} from 'angular-mydatepicker'; // other imports are here... export class MyTestApp { myDpOptions: IAngularMyDpOptions = { dateRange: false, dateFormat: 'dd.mm.yyyy' // other options are here... }; model: IMyDateModel = null; constructor() { } onDateChanged(event: IMyDateModel): void { // date selected } }