我们的项目正在将Angular 4更新为Angular7。作为此ng2-bootstrap的一部分,已更新为ngx-bootstrap。
Bootstrap版本是3,ngx-bootstrap是5.3.2
我们正在使用DatepickerModule,不是 BsDatepickerModule。在ng2-bootstrap中,datepicker似乎内置了glyphicons。现在它们消失了。 “上一个”和“下一个”按钮使用glyphicon-chevron-left和glyphicon-chevron-right。现在,他们只是将“ ”作为文本。
是否可以在ngx-bootstrap日期选择器中设置自定义的上一个和下一个按钮?还是使用字形图标? (或字体真棒图标?)
ng2:
ngx:
。html:
<div style="float:left;" [ngStyle]="{'opacity': disabled ? '0.5' : '1'}">
<div class="input-group">
<input #endDateRef type="text" [disabled]="disabled" [class.has-error]="!endDateValid"
placeholder="mm/dd/yyyy" maxlength="10" [ngStyle]="{'font-size' : !endDate ? '14px' : '15px'}"
(keyup)="onEndDateKeyup()" (keyup.enter)="$event.target.blur()"
(focus)="close()" (blur)="onExitDateInput('end')" class="{{small ? 'small' : ''}}">
<span class="input-group-addon datepicker {{small ? 'small-icon' : ''}}" [class.has-error]="!endDateValid">
<span class="glyphicon glyphicon-calendar" (click)="!disabled && (showEndPicker = !showEndPicker); showStartPicker = false"></span>
</span>
</div>
<div *ngIf="showEndPicker"
style="position: absolute; z-index:10; min-height:290px;">
<datepicker [(ngModel)]="endDate"
[minDate]="minDate"
[maxDate]="maxDate"
(selectionDone)="datePicked('end')"
[showWeeks]="false">
</datepicker>
</div>
</div>
更新:
我已经设法通过编辑styles.scss来完成此操作,但这似乎有点不客气。如果有更好的方法,我很想听听。
styles.scss:
daypicker > table > thead > tr > th {
.pull-left {
font-family: 'Glyphicons Halflings';
font-size: 0px;
&::before {
content: "\E079";
font-style: normal;
font-size: 16px;
font-weight: 400;
line-height: 1;
display: inline-block;
position: relative;
top: 1px;
box-sizing: border-box;
}
&::after {
box-sizing: border-box;
}
}
.pull-right {
font-family: 'Glyphicons Halflings';
font-size: 0px;
&::before {
content: "\E080";
font-style: normal;
font-size: 16px;
font-weight: 400;
line-height: 1;
display: inline-block;
position: relative;
top: 1px;
box-sizing: border-box;
}
&::after {
box-sizing: border-box;
}
}
}
显然,没有更好的方法可以完成此操作。我编辑了styles.scss以使其正常工作:
daypicker > table > thead > tr > th {
.pull-left {
font-family: 'Glyphicons Halflings';
font-size: 0px;
&::before {
content: "\E079";
font-style: normal;
font-size: 16px;
font-weight: 400;
line-height: 1;
display: inline-block;
position: relative;
top: 1px;
box-sizing: border-box;
}
&::after {
box-sizing: border-box;
}
}
.pull-right {
font-family: 'Glyphicons Halflings';
font-size: 0px;
&::before {
content: "\E080";
font-style: normal;
font-size: 16px;
font-weight: 400;
line-height: 1;
display: inline-block;
position: relative;
top: 1px;
box-sizing: border-box;
}
&::after {
box-sizing: border-box;
}
}
}