javascript - 在 AngularJS 的 Datetime-picker 中只保留时间的选择

标签 javascript angularjs datetime angular-ui-bootstrap datetimepicker

我正在使用 AngularJS,我想将日期时间选择器分成两部分。默认情况下,在打开日历的地方,您必须选择日期,然后选择时间(小时和分钟)。我想制作两个日期时间选择器,一个用于一天,一个用于小时/分钟。我试图以第一种形式改变它:

 datetime-picker="dd/MM/yyyy HH:mm"

进入

 datetime-picker="HH:mm"

但它不起作用。

问题是,如果您单击第一个日历以打开第一个日期时间,它会让您在时间之前选择日期。相反,我只想选择小时和分钟。

这是 plunker: https://plnkr.co/edit/BLPsNszpUWjXuHXaj7hO?p=preview

最佳答案

您正在使用此存储库中的 datetimepicker 组件:https://github.com/Gillardo/bootstrap-ui-datetime-picker .文档中提到您可以使用以下属性:

enableDate - Whether you would like the user to be able to select a date. Defaults to true.
enableTime - Whether you would like the user to be able to select a time. Defaults to true.

因此,如果您想在组件中隐藏日期选择器部分,请将 enable-date="false" 添加到您的输入字段。像这样:

<input type="text" class="form-control" datetime-picker="HH:mm" enable-date="false" ng-model="ctrl.date.value" is-open="ctrl.date.showFlag"/>

同样,要隐藏组件中的时间选择器部分,请将 enable-time="false" 添加到您的输入字段。像这样:

<input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="ctrl.date.value" is-open="ctrl.date.showFlag"/>

这是更新插件:https://plnkr.co/edit/luMPl8aOFkzBuW4BeNkx?p=preview .希望这会有所帮助。

关于javascript - 在 AngularJS 的 Datetime-picker 中只保留时间的选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48688541/

相关文章:

javascript - 许多类似的没有 ID 的 AJAX 建议框

javascript - 当渲染返回另一个组件时,React 不会调用 componentWillMount

javascript - Angular ng-click 排序

javascript - ng-repeat 中的跟踪不是跟踪

ruby-on-rails - 如何在 Ruby 中更改 DateTime 的时区?

javascript - 文本和输入元素以相同的方式附加和赋予属性。显示文本但不显示输入。为什么?

javascript - ASP :Button Click Event doesn't fire

c# - 优化 DateTime.Now 的替代方案

javascript - 如何使用 Php session 变量作为 Angular Js 数据

c# - 无法将日期字符串转换为 DateTime