如何使时间选择器出现在 Angular 的下拉列表中?

Question

在 Bootstrap 4 文档中，您可以有一个仅包含时间选择器的可切换下拉列表。 但是，我想使用时间选择器的 Angular 模块而不是使用香草引导程序来添加它。 您可以使用 NgbDatepicker 完成类似的事情，但是，没有列出使用时间选取器完成此操作的示例。

我确实尝试使用相同的代码并将NgbDatePicker的提及更改为NgbTimePicker无济于事。 下面的示例生成一个Template parse errors:其中 ngbTimepicker 未被识别为指令。

<div class="input-group">
<input class="form-control" name="startTime" [(ngModel)]="newEmployeeTime.StartTime" ngbTimepicker 
#start="ngbTimepicker" [readonly]="true">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="startTime.toggle()" type="button"><i 
class="fa fa-clock"></i></button>
</div>
</div>

当然，一定有一种方法可以做到这一点，这并不复杂，但我现在似乎想不起来。

Answer 1

package.json

"dependencies": {
"@ng-bootstrap/ng-bootstrap": "5.1.4"
}

app.module.ts

import { NgbdDatepickerPopup } from './datepicker-popup'
declarations: [NgbdDatepickerPopup]
exports: [NgbdDatepickerPopup]
bootstrap: [NgbdDatepickerPopup]

组件.ts

export class Component {
model;
}

组件.html

<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>
</div>
</form>

组件.css

/* Datepicker popup icon */
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;
}
/* Sortable table demo */
th[sortable] {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
th[sortable].desc:before, th[sortable].asc:before {
content: '';
display: block;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC') no-repeat;
background-size: 22px;
width: 22px;
height: 22px;
float: left;
margin-left: -22px;
}
th[sortable].desc:before {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
/* Filtering table demo */
ngbd-table-filtering span.ngb-highlight {
background-color: yellow;
}
/* Complete table demo */
ngbd-table-complete span.ngb-highlight {
background-color: yellow;
}
ngb-carousel .picsum-img-wrapper {
position: relative;
height: 0;
padding-top: 55%; /* Keep ratio for 900x500 images */
}
ngb-carousel .picsum-img-wrapper>img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}