Angular Bootstrap DateTimePicker - 如何通过禁用该字段的输入来强制用户从下拉列表 select

Question

现在，我可以从我的代码中select下拉菜单中的日期和时间，并能够通过接受用户的输入进行编辑。

但我想强制用户仅从下拉列表中 select 而不是在该特定字段中输入任何内容。

这是我用于日期和时间选择器下拉菜单的代码因此，如果您看到 UI，我希望用户仅从下拉列表中选择 select。我不希望用户提供任何自己的输入

任何帮助将不胜感激...

Answer 1

angular.module("app",['ui.bootstrap.datetimepicker'])

<link href="//unpkg.com/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="//unpkg.com/angular-bootstrap-datetimepicker/src/css/datetimepicker.css" rel="stylesheet" />
<script src="//unpkg.com/jquery"></script>
<script src="//unpkg.com/moment/moment.js"></script>
<script src="//unpkg.com/bootstrap/dist/js/bootstrap.js"></script>
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
<script src="//unpkg.com/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>

<body ng-app="app">
  <h3>Datepicker DEMO</h3>
  <p>Selected date: {{data.date | date : 'medium'}}</p>
  <button class="dropdown dropdown1-parent">
    <a class="dropdown-toggle" id="dropdown1" 
       role="button" data-toggle="dropdown" 
       data-target=".dropdown1-parent" href="#">
        Pick Date&nbsp;<i class="glyphicon glyphicon-calendar"></i>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <datetimepicker data-ng-model="data.date"
            data-datetimepicker-config="{ dropdownSelector: '.dropdown-toggle' }">
        </datetimepicker>
    </ul>
  </button>
</body>

Angular Bootstrap DateTimePicker - 如何通过禁用该字段的输入来强制用户从下拉列表 select

Angular Bootstrap DateTimePicker - How to force a user to select from dropdown by disabling the inputs for that field

angularjs

single-page-application

angularjs-scope

bootstrap-datetimepicker

angular-directive