Question

我正在使用这个着名的材料datetimepicker库：https://github.com/alenaksu/mdPickers （虽然我找不到文档）

A demo of this at:
https://codepen.io/alenaksu/details/eNzbrZ/

我需要做的是我需要15分钟间隔的时间选择器上的步骤，这意味着可以选择任何小时，但只能在00,15,30和45选择分钟。

感谢任何帮助。

Answer 1

@Biswas，我无法使用您提到的库实现此目的，但是能够使用其他库实现此目的。

https://github.com/beenote/angular-material-datetimepicker

如果日期时间选择器的样式/颜色代码与您在页面中的样式/颜色代码不同，则可能需要使用CSS。

此库具有属性“minute = steps”，您可以在其中设置分钟所需的步数。我创造了一个用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();

  }]);
})();

让我知道它是怎么回事。

Answer 2

我在1.8.6中修复了它：

https://github.com/beenote/angular-material-datetimepicker/releases/tag/v1.8.6

它会将ngModel设置的初始输入舍入到最近的有效步。分钟步数= 1,5,10,15,30 ......默认步长为5分钟。

在mdPicker库angularJs上设置分钟步骤

2 个答案: