Using angularjs ui bootstrap datepicker und timepicker zusammen - angularjs, angular-ui-bootstrap

Ich versuche, den Wert meines ui.bootstrap-Timepickers zu dem Datum in meiner Eingabe (Text) wie folgt hinzuzufügen:

Nicht sicher, was mein Code fehlt, um das zu erreichen.

Code aus genommen anglejs.ui.bootstrap

Hier ist meins Plünderer

Vielen Dank

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 "";
};

});

Antworten:

Der Datumspicker von angle-ui benötigt type = "text" im Eingabefeld

<input type="text" .../>

und das richtige Format, um Datum und Uhrzeit im Timepicker anzuzeigen. Ich habe das erste Format an angepasst "TT-MMMM-JJJJ hh: mm: ss" in der Steuerung.

$scope.formats = ["dd-MMMM-yyyy hh:mm:ss", "yyyy/MM/dd", "dd.MM.yyyy", "shortDate"];
$scope.format = $scope.formats[0];

Hier ist eine Arbeit Plünderer.