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

标签： angularngx-mydatepicker

Answer 1

您可以尝试将其设置为 false 'alignSelectorRight: true'。您还可以根据需要使用适当的 css 选择器实现对齐。