Search code examples
angularjsangularjs-scopesingle-page-applicationangular-directivebootstrap-datetimepicker

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

right now from my code, I am able to select a date & time from the drop-down and able to edit by taking inputs from the user.

But I want to force the user to select only from the dropdown rather entering any inputs in that specific field.

Here is the code I used for the date and time picker drop down So If you see the UI I want the user to select only from the drop down. I don't want the user to give any own inputs

1

2

Any help will be appreciated...

Solution 

  • 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>