javascript - 如何让 Timepicker 出现在 Angular 的下拉菜单中?
问题描述
在Bootstrap 4 文档中,您可以有一个仅包含时间选择器的可切换下拉列表。但是,我想使用时间选择器的 Angular 模块而不是使用香草引导程序来添加它。您可以使用NgbDatepicker完成类似的操作,但是,没有列出的示例可以使用 timepicker 完成此操作。
我确实尝试使用相同的代码并将 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>
当然必须有一种方法来完成这个并不复杂,但我现在似乎无法想到它。
解决方案
包.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;
}
推荐阅读
- python - Python Regex:如果包含某些字符串,则不匹配
- awk - 使用 awk 打印字段是否以特定字符串开头
- spring-boot - 为什么 Intellij 在 Spring Boot Starter 项目中无法识别 Gradle?
- swift - 初始化后将数据传递给 TabBarControllers?
- swift - 快照/观察者代码在 Firebase 中做了什么?
- python-3.x - 根据python3.x中的规则查找dict的交集
- css - css 一次过渡到多个元素
- python - 获取python中调用函数的源代码
- sql - Group By 中的 AWS Athena ALIAS 未得到解决
- vba - 未找到方法或数据成员 MS Access