angular - 角度引导日期选择器输入通过单击添加样式
问题描述
我正在尝试通过单击将样式应用于输入。当我按下它时,我需要在字段周围有一个橙色框,如果我使用焦点,那么它会被使用一会儿,然后在它移动到日历字段时消失。我以这种方式解决了这个问题。
<div class="input-group">
<input id="dateOfReceipt" class="form-control date calendar_input pl-4" name="dp" ngbDatepicker #dR="ngbDatepicker"
[readOnly]="true"
[minDate]="dateOfReceiptStart"
[markDisabled]="markDisabled"
[placeholder]="bus.seat.fields.jobOfferBodyFields.dateOfReceipt ?
bus.seat.fields.jobOfferBodyFields.dateOfReceipt : datePickerPlaceholder"
[(ngModel)]="bus.seat.fields.jobOfferBodyFields.dateOfReceipt"
[disabled]="!bus.isEdit" (click)="dR.toggle(); showDatepickerBorder('dateOfReceipt')"
(dateSelect)="onDateOfReceiptDateSelect($event)"
[ngClass]="{'focus-border': datePickerInputFocusBorder.dateOfReceipt}">
<div class="input-group-append">
<button class="btn calendar-button" type="button"
[disabled]="!bus.isEdit" (click)="dR.toggle(); showDatepickerBorder('dateOfReceipt')">
<mat-icon class="calendar-icon">calendar_today</mat-icon>
</button>
</div>
</div>
showDatepickerBorder(key: string) {
this.datePickerInputFocusBorder[key] = true;
}
hideDatepickerBorder(obj) {
for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
obj[prop] = false;
}
}
}
@HostListener('document:click', ['$event']) clickOutside(event) {
if (!this.eRef.nativeElement.contains(event.target)) {
this.hideDatepickerBorder(this.datePickerInputFocusBorder);
}
}
我怎样才能让它更容易?
解决方案
你可以简单地询问“dR.isOpen()” -dR 是你使用的模板引用变量 - 并使用 [ngClass] 如果你有
input.form-control:focus, .focus-border{
box-shadow: 0 0 0 .2rem rgba(255,140,0,.25);
border:orange
}
您可以使用
<input class="form-control" ngbDatepicker #dR="ngbDatepicker"
[ngClass]="dR.isOpen()?'focus-border':null" ... >
推荐阅读
- scenekit - SwiftUI:将 SwiftUI 路径添加到 Scenekit 场景
- codenameone - 代号一卷曲请求oAuth
- regex - 使用 RegEx,我如何记录特定 URL 而不是其他 URL 的转换?
- linker - 使用非易失性存储器 (NVRAM) 时 ld 链接脚本的加载地址 (LMA)
- ms-access - 使用组合框创建 ms 访问报告
- node.js - 如何签署 JWT 以从 azure Active Directory 交换访问令牌?
- qt - QT QML Circle 和一个文本列表视图
- javascript - 如何在 html 画布上找到三角形的区域?
- c - 是什么导致我的数组地址在传递给函数时被破坏(更改)?
- c++ - x509_store_add_cert 和 ssl_ctx_use_certificate 之间的区别?