如何让Timepicker出现在Angular的下拉列表中？
要让Timepicker出现在Angular的下拉列表中，可以使用第三方库ngx-bootstrap来实现。ngx-bootstrap是一个基于Bootstrap的Angular组件库，提供了丰富的UI组件和功能。
首先，确保已经安装了ngx-bootstrap库。可以通过以下命令进行安装：
npm install ngx-bootstrap --save安装完成后，需要在Angular项目的根模块中引入所需的ngx-bootstrap组件。在app.module.ts文件中添加以下代码：
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
@NgModule({
imports: [
// 其他模块
TimepickerModule.forRoot()
],
// 其他配置
})
export class AppModule { }接下来，在需要使用Timepicker的组件中，可以通过以下方式添加Timepicker到下拉列表中：
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="timepickerDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
选择时间
</button>
<div class="dropdown-menu" aria-labelledby="timepickerDropdown">
<timepicker [(ngModel)]="selectedTime"></timepicker>
</div>
</div>在上述代码中，通过使用Bootstrap的dropdown组件和ngx-bootstrap的timepicker组件，创建了一个下拉列表。点击按钮时，下拉列表会展示Timepicker组件，可以选择时间。
需要注意的是，上述代码中的selectedTime是一个绑定到Timepicker的变量，用于存储选择的时间值。
关于ngx-bootstrap的Timepicker组件的更多信息和使用方法，可以参考腾讯云的相关产品ngx-bootstrap的官方文档：ngx-bootstrap Timepicker。
通过以上步骤，就可以在Angular的下拉列表中使用Timepicker组件了。
相关·内容
在Bootstrap 4 docs上，你可以有一个只包含时间选择器的可切换下拉列表。然而，我想使用一个用于时间选择器的Angular模块来添加这个，而不是使用普通的引导程序。您可以使用NgbDatepicker来完成类似的任务，但是，没有列出使用时间选择器来完成此任务的示例。我确实尝试过使用相同的代码，并将提到的NgbDatePicker更改为NgbTimePicker，但都无济于事。下面的示例生成了一个Template parse
浏览 18提问于2019-12-24得票数 1
回答已采纳
每次用户点击特定的表单字段时，我都会尝试使用jquery显示一个下拉列表...= '<ul class="timePicker">' timePicker += '<li>11.00am</li>'
浏览 0提问于2010-03-19得票数 1
1回答
我似乎找不到一个简单，好的日期和时间选择器在AngularJS中使用。有一些是针对Javascript的，但我能找到的并不多(combodate似乎还可以)。但为了简单起见，我想我想做一个简单的下拉列表，包括未来30天和过去30天的日期。在代码方面，这看起来会怎么样？此外，我需要一个单独的下拉列表的时间。我正在考虑做一个下拉列表，而不是在24小时内显示每分钟选项，
浏览 2提问于2016-03-31得票数 0
1回答
我为mootools写了一个小插件，让时间选择器附加到输入域。el.addEvents({ TimePicker.activefunction() {
浏览 3提问于2012-09-28得票数 4
回答已采纳
我想从daterangepicker禁用未来几个小时，我已经尝试过了但这只会禁用未来的日期，而不是小时。另外，我如何禁用分钟下拉列表，或者只是删除它的日期选择器，因为我想只保留小时下拉列表。$('#demo').daterangepicker({
"showISOW
浏览 6提问于2020-04-11得票数 0
5回答
我为我的一个内部站点使用了这个timepicker：，通过使用下面的命令来启用这个示例中提到的timepicker <option value<option value="2">Text</option><input type="text" id="time1" size="
浏览 0提问于2011-11-23得票数 1
回答已采纳
2回答
我是编程新手，想做一个小的Raid Planner。现在，我尝试用数据库中的Raidname填充我的下拉列表，这一步可能需要一些帮助。我在下拉列表中添加数据时遇到了问题。raid.service.tsimport { Observable } from 'rxjs&
浏览 1提问于2020-09-28得票数 0
我有一个角度应用程序建立在上，并试图添加引导导航下拉菜单，发现它不工作。我在这个问题堆栈溢出问题中找到了一个解决方案：我想要做的是弄清楚如何更改或配置Yeoman Generator，以便添加正确的下拉菜单样式 <!
浏览 0提问于2015-10-16得票数 0
我使用的是jQuery时间选择器()和以下输入字段。当我从下拉列表中选择一个选项时，处理程序似乎不会触发。它似乎只有当我手动输入一个值并按tab键时才能工作？<input id="TmOnSite" class="timepicker js-tm-on-site" type="text" value="" name="TmOnSite" aria-invalid="false">
<in
浏览 9提问于2017-09-29得票数 3
回答已采纳
3回答
我有一个下拉列表，也就是TimePicker，你可以选择像1: 00 am这样的时间。在下拉列表中单击item，我称之为： handleSelect(time, timeState);这是整个TimePicker组件的<
浏览 0提问于2019-07-29得票数 1
回答已采纳
我目前正在使用Angular 2.4.0应用程序中的Angular Material2 (使用@angular/material: 2.0.0-beta.1)。由于某些原因，md-select下拉菜单不是出现在初始值、占位符或箭头上方以选择下拉菜单(如材料文档中的这些所示)，而是一直显示在页面底部。它们也将是整个页面的宽度，而不是下拉列表的宽度。这是我<
浏览 55提问于2017-01-29得票数 4
我想从下拉列表中隐藏或删除默认的30分钟时间间隔。$(function () { timeFormat: 'HH:mm',
浏览 6提问于2019-08-16得票数 0
我的问题如下，当你开始在google电子表格单元格上输入时，属于自定义列表的字段(在文本中的任何位置)都会出现在下拉列表中，有没有关于如何让输入的字符出现在下拉列表中的教程。我不太了解Javascript，所以如果有任何书或参考资料可以找到类似的东西，我会非常感激的。
浏览 0提问于2012-06-22得票数 1
回答已采纳
我想使用bootstrap-datepicker，并且我必须给我的输入赋值函数， showInputs:下面是我的控制器函数： //Timepicker
angular.element(".time
浏览 7提问于2017-01-30得票数 1
回答已采纳
我在Angular中有一个devextreme网格，它有一列，每行都需要一个下拉列表，但是下拉列表是特定于该行的，所以行的数据源包括下拉列表的数据源。不幸的是，它不允许我在下拉列表中使用像[dataSource]="data.rowDataSourceInfo"这样的东西(它就是不显示任何东西，也没有控制台错误)。有没有人知道
浏览 0提问于2020-10-30得票数 1
我要用kendoTimePicker做的是在晚上11:30之前的所有时间有30分钟的间隔，但在11:30之后显示所有随后的时间，直到12AM的分钟间隔。不确定此控件是否支持它。基本上看起来像这样的东西：晚上11:00晚上11:31晚上11:33
..etc
浏览 3提问于2013-02-01得票数 2
回答已采纳
我需要解决Timepicker的问题。我在Javascript中添加了一个时间选择器，现在用户可以从下拉列表中选择时间，但我想检查用户是否选择了当前时间的5小时之间的时间，否则返回false。让我和你分享我的代码。$('.timepicker').timepicker({ setTime: new D
浏览 9提问于2019-07-29得票数 1
回答已采纳
2回答
根据他们的文档，我已经设置了时间选择器:false以及时间选择器:true。 bigBanner: true, defaultOpen: true在component.html文件中。<angular2-date-picker [(ngModel)]="date" [settings]="settings"><
浏览 1提问于2018-04-24得票数 5
回答已采纳
我有一些工作的角度材料日期选择器，但没有时间选择器。版本是Angular 8。 因为Angular材质不提供时间选择器，所以我使用ngx-material-timepicker。我可以将时间选择器添加到html中，但我不知道如何获取选定的时间，因为将其绑定到输入会抛出一个错误： <input [ngxTimepicker]="timePicker" />
<ngx-timepicker</
浏览 23提问于2020-04-21得票数 2
回答已采纳
3回答
我已见过先前提出这个问题的问题。但我不想用相同的id替换文本框。当在下拉列表中选择时间选择器时，timepicker 应在文本框(按预期运行)中启用function ChangeType(control){ $("#txtInput").timepicker();
浏览 2提问于2016-11-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
