Using angularjs ui bootstrap datepicker and timepicker together - angularjs

Question

I'm trying to add the value of my ui.bootstrap timepicker to the date in my input (text) like so:
Not sure what my code is missing to accomplish that.
Code taken from angularjs.ui.bootstrap
Here's my plunker
Thanks
html
<div ng-app="ui.bootstrap.demo">
<div ng-controller="DatepickerDemoCtrl">
<div class="form-group">
<div class="col-md-6">
<label for="appointment_start">Appointment datetime start:</label>
<p class="input-group">
<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" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<timepicker ng-model="dt" hour-step="1" minute-step="15" show-meridian="true">
</timepicker>
</div>
</div><!-- ng-controller -->
</div><!-- ng-app -->
js
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' && ( 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<$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 '';
};
});

Answer 1

The angular-ui datepicker needs type="text" on the input field
<input type="text" .../>
and the proper format to show the formatted date and time from the timepicker. I adjusted the first format to 'dd-MMMM-yyyy hh:mm:ss' in the controller.
$scope.formats = ['dd-MMMM-yyyy hh:mm:ss', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
Here is a working plunker.