我正在使用这个著名的 Material 日期时间选择器库:https://github.com/alenaksu/mdPickers (不过我找不到文档)
A demo of this at:
https://codepen.io/alenaksu/details/eNzbrZ/
我需要做的是我需要在15分钟间隔的时间选择器上进行步骤，所以这意味着可以选择任何小时，但只能选择00、15、30和45分钟。
感谢任何帮助。
最佳答案
@Biswas，我无法使用您提到的库实现此目的，但可以使用另一个库实现此目的。
https://github.com/beenote/angular-material-datetimepicker
如果日期时间选择器的样式/颜色代码与您页面中已有的不同，您可能需要尝试使用 CSS。
该库有一个属性“分钟=步数”，您可以在其中设置分钟所需的步数。我创建了一个 plunker，用 15 分钟的步骤来演示这一点。
注意:在这个库中只能通过时钟选择时间，我没有看到在输入框中输入时间的选项。您可以在上面的 Github 页面上进一步挖掘。
http://plnkr.co/edit/ajCWLmG7m79MSjxEf93S?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>mdPickers - date/time pickers for Angular Material</title>
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/ng-material-datetimepicker@1.8.4/dist/material-datetimepicker.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<md-content id="content" layout="column" flex ng-app="app" ng-controller="MainCtrl as ctrl">
<md-toolbar class="md-whiteframe-z2">
<div style="text-align: center;">
<h1>mdPickers</h1>
<h2>Material Design date/time pickers</h2>
</div>
</md-toolbar>
<md-content flex layout="column" layout-align="center center" layout-padding>
<h3><a href="https://github.com/alenaksu/mdPickers">https://github.com/alenaksu/mdPickers</a></h3>
<md-input-container flex-gt-md="30">
<label>Timepicker Only</label>
<input mdc-datetime-picker date="false" time="true" type="text" id="time" short-time="true"
show-todays-date click-outside-to-close="true"
placeholder="Time" auto-ok="true"
min-date="minDate" minute-steps="15"
format="hh:mm a"
ng-change="vm.saveChange()"
ng-model="time">
</md-input-container>
</md-content>
</md-content>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://unpkg.com/ng-material-datetimepicker@1.8.4/dist/angular-material-datetimepicker.min.js"></script>
<!--<script src="https://unpkg.com/ng-material-datetimepicker@1.8.4/dist/angular-material-datetimepicker.min.js.map"></script> -->
<script src="app.js"></script>
</body>
</html>
JS:
(function() {
var module = angular.module("app", [
"ngMaterial",
"ngAnimate",
"ngAria",
"ngMaterialDatePicker"
]);
module.controller("MainCtrl", ['$scope', function($scope){
$scope.currentDate = new Date();
}]);
})();
让我知道进展如何。
关于javascript - 在 mdPicker 库 angularJs 上设置分钟步骤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45864678/