Angular 当我尝试更改ng模板上的值时,NgbPopover将立即关闭(角度)
我正在将Angular 当我尝试更改ng模板上的值时,NgbPopover将立即关闭(角度),angular,datetimepicker,popover,ng-bootstrap,timepicker,Angular,Datetimepicker,Popover,Ng Bootstrap,Timepicker,我正在将ngbPopover与ngb日期选择器和ngb时间选择器 <div class="input-group"> <input class="form-control" formControlName="createdStartDate" disabled="true" [value]="createdStartDateValue?(cr
ngbPopover
与ngb日期选择器
和ngb时间选择器
<div class="input-group">
<input class="form-control" formControlName="createdStartDate" disabled="true"
[value]="createdStartDateValue?(createdStartDateValue|date:'dd/MM/yyyy, HH:mm'):createdStartDateLabel">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" type="button" placement="bottom" popoverTitle="Select Date Time" [ngbPopover]="dateTimePicker" (click)="$event.stopPropagation()"></button>
<ng-template #dateTimePicker>
<ngb-datepicker [ngModel]="createdStartDate" (ngModelChange)="getCreatedStartDatetime()" [ngModelOptions]="{standalone:true}">
</ngb-datepicker>
<ngb-timepicker [ngModel]="createdStartTime" (ngModelChange)="createdStartTime=$event;getCreatedStartDatetime()" [ngModelOptions]="{standalone:true}">
</ngb-timepicker>
</ng-template>
</div>
</div>
当我尝试在时间选择器中添加一些输入时,它就关闭了。
如何阻止这种情况发生?css
.dropdown-toggle.calendar::after
{
border:0
}
button.calendar, button.calendar:active {
width: 2.75rem;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEUSURBVEiJ7ZQxToVAEIY/YCHGxN6XGOIpnpaEsBSeQC9ArZbm9TZ6ADyBNzAhQGGl8Riv4BLAWAgmkpBYkH1b8FWT2WK/zJ8ZJ4qiI6XUI3ANnGKWBnht2/ZBDRK3hgVGNsCd7/ui+JkEIrKtqurLpEWaphd933+IyI3LEIdpCYCiKD6HcuOa/nwOa0ScJEnk0BJg0UTUWJRl6RxCYEzEmomsIlPU3IPW+grIAbquy+q6fluy/28RIBeRMwDXdXMgXLj/B2uimRXpui4D9sBeRLKl+1N+L+t6RwbWrZliTTTr1oxYtzVWiTQAcRxvTX+eJMnlUDaO1vpZRO5NS0x48sIwfPc87xg4B04MCzQi8hIEwe4bl1DnFMCN2zsAAAAASUVORK5CYII=') !important;
background-repeat: no-repeat;
background-size: 23px;
background-position: center;
}
html
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd" [attr.disabled]="true"
name="dp" >
<div ngbDropdown class="input-group-append d-inline-block" placement="bottom-right">
<button class="btn btn-outline-secondary calendar" id="dropdownBasic1" ngbDropdownToggle></button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
Your calendar and your timer
</div>
</div>
</div>
</div>
你的日历和计时器
您还可以使用svg,例如
.dropdown-toggle.calendar2::after
{
border:0
}
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd" [attr.disabled]="true"
name="dp" >
<div ngbDropdown class="input-group-append d-inline-block" placement="bottom-right">
<button class="btn btn-outline-secondary calendar2" id="dropdownBasic1" ngbDropdownToggle>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"></path>
</svg>
</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
Your calendar and your timer
</div>
</div>
</div>
</div>
.dropdown toggle.calendar2::after
{
边界:0
}
你的日历和计时器
为什么不使用ngbDropDown?顺便说一句,在这篇文章中有一些非常封闭的选项,您尝试的ngbDropDown不会禁用输入框。不应允许用户手动输入日期。你能帮我吗?我想要一个禁用的输入框和一个带有日历图标的按钮@Eliseo您需要使用
。这将禁用输入。如果您使用的是bootstrap,那么如果使用bootstrap 4.5.2,也可以使用
。