title: Using angularjs ui bootstrap datepicker and timepicker together
body: <p>I'm trying to add the value of my ui.bootstrap timepicker to the date in my input (text) like so:</p>
  
  <p><a href="https://i.stack.imgur.com/oVTZD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oVTZD.jpg" alt="enter image description here"></a></p>
  
  <p>Not sure what my code is missing to accomplish that.</p>
  
  <p>Code taken from <a href="https://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">angularjs.ui.bootstrap</a></p>
  
  <p>Here's my <a href="http://plnkr.co/edit/VwBrKDJbdmSZAFm22Kii" rel="nofollow noreferrer">plunker</a></p>
  
  <p>Thanks</p>
  
  <p>html</p>
  
  <pre><code>  &lt;div ng-app="ui.bootstrap.demo"&gt;
      &lt;div ng-controller="DatepickerDemoCtrl"&gt;
  
        &lt;div class="form-group"&gt;
  
          &lt;div class="col-md-6"&gt;
            &lt;label for="appointment_start"&gt;Appointment datetime start:&lt;/label&gt;
            &lt;p class="input-group"&gt;
              &lt;input type="date" id="appointment_start" name="appointment_start" class="form-control" readonly datepicker-popup ng-model="dt" is-open="status.opened" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"
              close-text="Close" /&gt;
              &lt;span class="input-group-btn"&gt;
                  &lt;button type="button" class="btn btn-default" ng-click="open($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;/span&gt;
            &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;timepicker ng-model="dt" hour-step="1" minute-step="15" show-meridian="true"&gt;
          &lt;/timepicker&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- ng-controller --&gt;
    &lt;/div&gt;&lt;!-- ng-app --&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>  angular
   .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
   .controller('DatepickerDemoCtrl', function ($scope) {
  
    $scope.today = function() {
      $scope.dt = new Date();
    };
    $scope.today();
  
    $scope.clear = function () {
      $scope.dt = null;
    };
  
    // Disable weekend selection
    $scope.enabled = function(date, mode) {
      return ( mode === 'day' &amp;&amp; ( date.getDay() === 0 || date.getDay() === 6 ) );
    };
  
  
    $scope.open = function($event) {
      $scope.status.opened = true;
    };
  
    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[0];
  
    $scope.status = {
      opened: false
    };
  
    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    var afterTomorrow = new Date();
    afterTomorrow.setDate(tomorrow.getDate() + 2);
    $scope.events =
      [
        {
          date: tomorrow,
          status: 'full'
        },
        {
          date: afterTomorrow,
          status: 'partially'
        }
      ];
  
    $scope.getDayClass = function(date, mode) {
      if (mode === 'day') {
        var dayToCheck = new Date(date).setHours(0,0,0,0);
  
        for (var i=0;i&lt;$scope.events.length;i++){
          var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
  
          if (dayToCheck === currentDay) {
            return $scope.events[i].status;
          }
        }
      }
  
      return '';
    };
  
  });
  </code></pre>