我从http://plnkr.co/edit/2JByf4?p=preview引用，但它从输入字段显示“Sun Jan 04 2015 22:05:52 GMT + 0700（东南亚标准时间）”。我也尝试通过添加此代码来获取客户：
$scope.date= $filter('date')(new Date(), 'MM/dd/yyyy');
然后它正常工作，但我无法编辑小时，因为$ scope.date是字符串类型所以我将此代码添加到datetimepicker.js中的第108行
if (typeof $scope.ngModel == "string") {
$scope.ngModel = new Date($scope.ngModel);
}
但是当我编辑小时时，它会将输入的显示更改为“2015年1月4日22:05:52 GMT + 0700（东南亚标准时间）”。
请帮助保持日期显示为“MM / dd / yyyy”格式，并且还可以正确编辑小时
更新了html
<div class="container" id="createPage" ng-app="app_create">
<div ng-controller="DemoCtrl">
<div class="row">
<form class="form-horizontal" ng-submit="submit()" role="form" novalidate name="form">
<div class="col-sm-12">
<div class="form-group">
<div class="timepicker">
<div class="col-sm-2">
<label class="launch-date-title">Launch Date:</label>
</div>
<div class="col-sm-5">
<datetimepicker min-date="minDate"
show-weeks="showWeeks"
hour-step="hourStep"
minute-step="minuteStep"
ng-model="test"
show-meridian="showMeridian"
date-format="MM/dd/yyyy"
date-options="dateOptions"
date-disabled="disabled(date, mode)"
readonly-time="false">
</datetimepicker>
</div>
</div>
</div>
<div class="form-group">
<div class="timepicker">
<div class="col-sm-2">
<label class="launch-date-title">Launch Date2:</label>
</div>
<div class="col-sm-5">
<pre>Selected time and date is: <em>{{date | date:'shortTime' }}, {{date | date:'fullDate' }}</em></pre>
<datetimepicker min-date="minDate"
show-weeks="showWeeks"
hour-step="hourStep"
minute-step="minuteStep"
show-meridian="showMeridian"
date-format="dd-MMM-yyyy"
ng-model="date"
date-options="dateOptions"
date-disabled="disabled(date, mode)"
readonly-time="false"></datetimepicker>
<hr>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 unpadding">
<div class="col-sm-7">
<label>Order</label>
</div>
<div class="col-sm-3">
<input type="checkbox"
class="checkbox"
ng-model="item.Order" />
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-5 col-sm-offset-1">
<label>Delivery Date:</label>
</div>
<div class="col-sm-5">
<input type="text"
datepicker-popup="{{format}}"
ng-model="item.DeliveryDate"
is-open="item.DeliveryDate.open"
ng-click="item.DeliveryDate.open = true"
max-date="maxDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-class="{true: 'availableonorder-active' }[item.OnOrder]"
ng-required="true"
readonly="readonly"
close-text="Close"
class="form-control input-md datepicker" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
javasript
var app_create = angular.module('app_create', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);
app_create.controller('DemoCtrl', function ($scope, $filter) {
$scope.dateTimeNow = function () {
$scope.date = new Date();
};
$scope.dateTimeNow();
$scope.toggleMinDate = function () {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.maxDate = new Date('2014-06-22');
$scope.toggleMinDate();
$scope.dateOptions = {
startingDay: 1,
showWeeks: false
};
$scope.$watch('date', function () {
alert('changed');
});
$scope.formats = ['dd-MMMM-yyyy', 'MM/dd/yyyy', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
//$scope.test = $filter('date')(new Date("1/16/1990"), 'MM/dd/yyyy');
$scope.call = function (input) {
if (String(input))
console.log('true');
else
console.log('false');
}
$scope.dateOptions = {
startingDay: 1,
showWeeks: false
};
$scope.hourStep = 1;
$scope.minuteStep = 15;
$scope.timeOptions = {
hourStep: [1, 2, 3],
minuteStep: [1, 5, 10, 15, 25, 30]
};
$scope.showMeridian = true;
$scope.timeToggleMode = function () {
$scope.showMeridian = !$scope.showMeridian;
};
$scope.check = function (status) {
return status == true? true:false;
}
});
datetimepicker.js
angular.module('ui.bootstrap.datetimepicker', ["ui.bootstrap"])
.directive('datetimepicker', [
function () {
if (angular.version.full < '1.1.4') {
return {
restrict: 'EA',
template: "<div class=\"alert alert-danger\">Angular 1.1.4 or above is required for datetimepicker to work correctly</div>"
};
}
return {
restrict: 'EA',
require: 'ngModel',
scope: {
ngModel: '=',
dayFormat: "=",
monthFormat: "=",
yearFormat: "=",
dayHeaderFormat: "=",
dayTitleFormat: "=",
monthTitleFormat: "=",
showWeeks: "=",
startingDay: "=",
yearRange: "=",
dateFormat: "=",
minDate: "=",
maxDate: "=",
dateOptions: "=",
dateDisabled: "&",
hourStep: "=",
minuteStep: "=",
showMeridian: "=",
meredians: "=",
mousewheel: "=",
readonlyTime: "@"
},
template: function (elem, attrs) {
function dashCase(name, separator) {
return name.replace(/[A-Z]/g, function (letter, pos) {
return (pos ? '-' : '') + letter.toLowerCase();
});
}
function createAttr(innerAttr, dateTimeAttrOpt) {
var dateTimeAttr = angular.isDefined(dateTimeAttrOpt) ? dateTimeAttrOpt : innerAttr;
if (attrs[dateTimeAttr]) {
return dashCase(innerAttr) + "=\"" + dateTimeAttr + "\" ";
} else {
return '';
}
}
function createFuncAttr(innerAttr, funcArgs, dateTimeAttrOpt) {
var dateTimeAttr = angular.isDefined(dateTimeAttrOpt) ? dateTimeAttrOpt : innerAttr;
if (attrs[dateTimeAttr]) {
return dashCase(innerAttr) + "=\"" + dateTimeAttr + "({" + funcArgs + "})\" ";
} else {
return '';
}
}
function createEvalAttr(innerAttr, dateTimeAttrOpt) {
var dateTimeAttr = angular.isDefined(dateTimeAttrOpt) ? dateTimeAttrOpt : innerAttr;
if (attrs[dateTimeAttr]) {
return dashCase(innerAttr) + "=\"" + attrs[dateTimeAttr] + "\" ";
} else {
return dashCase(innerAttr);
}
}
function createAttrConcat(previousAttrs, attr) {
return previousAttrs + createAttr.apply(null, attr)
}
var tmpl = "<div class=\"datetimepicker-wrapper\">" +
"<input class=\"form-control\" type=\"text\" ng-click=\"open($event)\" is-open=\"opened\" ng-model=\"ngModel\" " + [
["minDate"],
["maxDate"],
["dayFormat"],
["monthFormat"],
["yearFormat"],
["dayHeaderFormat"],
["dayTitleFormat"],
["monthTitleFormat"],
["startingDay"],
["yearRange"],
["datepickerOptions", "dateOptions"]
].reduce(createAttrConcat, '') +
createFuncAttr("dateDisabled", "date: date, mode: mode") +
createEvalAttr("datepickerPopup", "dateFormat") +
"/>\n" +
"</div>\n" +
"<div class=\"datetimepicker-wrapper\" ng-model=\"time\" ng-change=\"time_change()\" style=\"display:inline-block\">\n" +
"<timepicker " + [
["hourStep"],
["minuteStep"],
["showMeridian"],
["meredians"],
["mousewheel"]
].reduce(createAttrConcat, '') +
createEvalAttr("readonlyInput", "readonlyTime") +
"></timepicker>\n" +
"</div>";
return tmpl;
},
controller: ['$scope',
function ($scope) {
$scope.time_change = function () {
if (angular.isDefined($scope.ngModel) && angular.isDefined($scope.time)) {
if (typeof $scope.ngModel == "string") {
$scope.ngModel = new Date($scope.ngModel);
}
$scope.ngModel.setHours($scope.time.getHours(), $scope.time.getMinutes());
//console.log($scope.ngModel);
}
}
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
}
],
link: function (scope) {
scope.$watch(function () {
return scope.ngModel;
}, function (ngModel) {
scope.time = ngModel;
});
}
}
}
]);