在 AngularJS 中只保留 Datetime-picker 中时间的选择
Leave only the choice of time in Datetime-picker in AngularJS
我正在使用 AngularJS,我想将日期时间选择器分成两部分。默认情况下,在打开日历的地方,您必须选择日期,然后选择时间(小时和分钟)。我想制作两个日期时间选择器,一个用于当天,一个用于 hours/minutes。我试图以第一种形式改变它:
datetime-picker="dd/MM/yyyy HH:mm"
进入
datetime-picker="HH:mm"
但是没用。
问题是,如果您单击第一个日历以打开第一个日期时间,它会让您在时间之前选择日期。相反,我只想选择小时和分钟。
您正在使用此存储库中的日期时间选择器组件: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。希望这会有所帮助。
我正在使用 AngularJS,我想将日期时间选择器分成两部分。默认情况下,在打开日历的地方,您必须选择日期,然后选择时间(小时和分钟)。我想制作两个日期时间选择器,一个用于当天,一个用于 hours/minutes。我试图以第一种形式改变它:
datetime-picker="dd/MM/yyyy HH:mm"
进入
datetime-picker="HH:mm"
但是没用。
问题是,如果您单击第一个日历以打开第一个日期时间,它会让您在时间之前选择日期。相反,我只想选择小时和分钟。
您正在使用此存储库中的日期时间选择器组件: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。希望这会有所帮助。