2

I am using ngx-mydatepicker from https://www.npmjs.com/package/ngx-mydatepicker

Its functioning properly, however, after clickin on textbox it is opening the calendar which is not aligned to the textbox

enter image description here

The code is as below

html:

   <form [formGroup]="AddNewFrm" (ngSubmit)="onSubmit(AddNewFrm)">
    <div class='row'>
        <div class='col-sm-6'>
            <div class="form-group form-inline">
                <label>Extract Date</label>
                <input required class="form-control" placeholder="Select Extract Date" ngx-mydatepicker name="ExtractDate"
                       [options]="myDateOptions" #dp="ngx-mydatepicker" (click)="dp.openCalendar()" [(ngModel)]="dateModel" (dateChanged)="onDateChanged($event)" />
            </div>
        </div>
        <div class='col-sm-6'>
            <a class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>Cancel</a>
            <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span>Submit</button>
        </div>
    </div>
</form

Component:

dateModel: any = { date: { year: 2018, month: 10, day: 9 } };
selectedDate: string = '';
myDateOptions: INgxMyDpOptions = {
    todayBtnTxt: 'Today',
    dateFormat: 'mm/dd/yyyy',
    firstDayOfWeek: 'mo',
    sunHighlight: true,
    disableUntil: { year: 2016, month: 8, day: 10 },
    alignSelectorRight: true
};

onDateChanged(event: IMyDateModel): void {
    this.selectedDate = event.formatted;        
}
captainsac
  • 2,484
  • 3
  • 27
  • 48

2 Answers2

0

can you try setting this to false 'alignSelectorRight: true'. Also you can achieve alignment as needed by using appropriate css selectors.

arpit sharma
  • 405
  • 4
  • 11
0

I recommend setting the float property to none or left.

Junius
  • 589
  • 2
  • 12
  • 41
NoMore
  • 1