ngx-mydatepicker-日历的位置未与输入对齐

Question

我正在使用https://www.npmjs.com/package/ngx-mydatepicker中的ngx-mydatepicker

其功能正常，但是，单击文本框后，它会打开未与文本框对齐的日历

代码如下

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

组件：

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

Answer 1

您能否尝试将其设置为false'alignSelectorRight：true'。此外，您还可以通过使用适当的CSS选择器来实现对齐。