我想要在angular js文件中的日期和时间选择器，当我在文本框中单击时，日期和时间选择器将弹出。在那个弹出框中，我需要同时选择日期和时间。
你可以使用angularjs的datetimepicker…我跟着https://github.com/g00fy-/angular-datepicker把它放在我的网站上…
这里有一个Bootstrap 3 Datepicker v4的angular包装器
您可以查看这个演示:http://plnkr.co/edit/kNqCuQ，其中包含一些修复的问题(作为双向模型绑定)。这是指令(datetime.js):
(function() {
'use strict';
angular
.module('plunker')
.directive('datetimepicker', [
'$timeout',
function($timeout) {
return {
require: '?ngModel',
restrict: 'EA',
scope: {
datetimepickerOptions: '@',
onDateChangeFunction: '&',
onDateClickFunction: '&'
},
link: function($scope, $element, $attrs, controller) {
$element.on('dp.change', function() {
$timeout(function() {
var dtp = $element.data('DateTimePicker');
controller.$setViewValue(dtp.date());
$scope.onDateChangeFunction();
});
});
$element.on('click', function() {
$scope.onDateClickFunction();
});
controller.$render = function() {
if (!!controller && !!controller.$viewValue) {
var result = controller.$viewValue;
$element.data('DateTimePicker').date(result);
}
};
$element.datetimepicker($scope.$eval($attrs.datetimepickerOptions));
}
};
}
]);
})();
(function(angular) {
'use strict';
angular.module('plunker', [])
.controller('controller', ['$scope', '$timeout', function($scope, $timeout) {
var vm = this;
vm.date = new Date();
vm.options = '{format:"DD.MM.YYYY HH:mm"}'
}]);
})(window.angular);
和html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example21-production</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"> </script>
<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script src="script.js"></script>
<script src="datetime.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap- datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap- datetimepicker.css" rel="stylesheet">
</head>
<body ng-app="plunker">
<p>// BE WARNED THIS IS VERSION 4.15.35 </p>
<p>// VERSION 4.17.37 (from bower repo) DOES NOT WORK CORRECTLY</p>
<p>// LOAD MASTER VERSION OR OLDER ONE</p>
<div ng-controller="controller as vm" style="width: 200px">
<div class="input-group input-group-sm date"
datetimepicker-options="{{vm.options}}"
datetimepicker ng-model="vm.date">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
{{vm.date}}
</div>
</body>
</html>
var app = angular。模块("应用程序",[' ui。引导"、"ui.bootstrap.datetimepicker ']);
应用程序。控制器('MyController'， ['$scope'， function($scope) {
var that = this;
// date picker
this.picker1 = {
date: new Date('2015-03-01T00:00:00Z'),
datepickerOptions: {
showWeeks: false,
startingDay: 1,
dateDisabled: function(data) {
return (data.mode === 'day' && (new Date().toDateString() == data.date.toDateString()));
}
}
};
// time picker
this.picker2 = {
date: new Date('2015-03-01T12:30:00Z'),
timepickerOptions: {
readonlyInput: false,
showMeridian: false
}
};
// date and time picker
this.picker3 = {
date: new Date()
};
// min date picker
this.picker4 = {
date: new Date(),
datepickerOptions: {
maxDate: null
}
};
// max date picker
this.picker5 = {
date: new Date(),
datepickerOptions: {
minDate: null
}
};
// set date for max picker, 10 days in future
this.picker5.date.setDate(this.picker5.date.getDate() + 10);
// global config picker
this.picker6 = {
date: new Date()
};
// dropdown up picker
this.picker7 = {
date: new Date()
};
// view mode picker
this.picker8 = {
date: new Date(),
datepickerOptions: {
mode: 'year',
minMode: 'year',
maxMode: 'year'
}
};
// dropdown up picker
this.picker9 = {
date: null
};
// min time picker
this.picker10 = {
date: new Date('2016-03-01T09:00:00Z'),
timepickerOptions: {
max: null
}
};
// max time picker
this.picker11 = {
date: new Date('2016-03-01T10:00:00Z'),
timepickerOptions: {
min: null
}
};
// button bar
this.picker12 = {
date: new Date(),
buttonBar: {
show: true,
now: {
show: true,
text: 'Now!'
},
today: {
show: true,
text: 'Today!'
},
clear: {
show: false,
text: 'Wipe'
},
date: {
show: true,
text: 'Date'
},
time: {
show: true,
text: 'Time'
},
close: {
show: true,
text: 'Shut'
},
cancel: {
show: true,
text: 'Cancel'
}
}
};
// when closed picker
this.picker13 = {
date: new Date(),
closed: function(args) {
that.closedArgs = args;
}
};
// saveAs - ISO
this.picker14 = {
date: new Date().toISOString()
}
this.openCalendar = function(e, picker) {
that[picker].open = true;
};
// watch min and max dates to calculate difference
var unwatchMinMaxValues = $scope.$watch(function() {
return [that.picker4, that.picker5, that.picker10, that.picker11];
}, function() {
// min max dates
that.picker4.datepickerOptions.maxDate = that.picker5.date;
that.picker5.datepickerOptions.minDate = that.picker4.date;
if (that.picker4.date && that.picker5.date) {
var diff = that.picker4.date.getTime() - that.picker5.date.getTime();
that.dayRange = Math.round(Math.abs(diff/(1000*60*60*24)))
} else {
that.dayRange = 'n/a';
}
// min max times
that.picker10.timepickerOptions.max = that.picker11.date;
that.picker11.timepickerOptions.min = that.picker10.date;
}, true);
// destroy watcher
$scope.$on('$destroy', function() {
unwatchMinMaxValues();
});
}]);