[英]Angular Ngx-Bootstrap Datepicker Custom Buttons for Next/Previous
我们的项目正在将 Angular 4 更新为 Angular 7。作为此 ng2-bootstrap 的一部分,已更新为 ngx-bootstrap。
Bootstrap 版本是 3,ngx-bootstrap 是 5.3.2
我们使用的是 DatepickerModule,而不是BsDatepickerModule。 在 ng2-bootstrap 中,日期选择器似乎内置了字形。现在它们不见了。 “上一个”和“下一个”按钮使用了 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 设法实现了这一点,但这似乎有点笨拙。 如果有更好的方法,我很想听听。
样式.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;
}
}
}
显然没有更好的方法来实现这一点。 我编辑了 style.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;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.