Javascript 在mdPicker库angularJs上设置分钟步长
我正在使用这个著名的datetimepicker库： （但我找不到文档） 我需要做的是，我需要在15分钟间隔的时间选择器上设置步骤，因此这意味着可以选择任何小时，但只能在00、15、30和45选择分钟Javascript 在mdPicker库angularJs上设置分钟步长,javascript,angularjs,Javascript,Angularjs,我正在使用这个著名的datetimepicker库： （但我找不到文档） 我需要做的是，我需要在15分钟间隔的时间选择器上设置步骤，因此这意味着可以选择任何小时，但只能在00、15、30和45选择分钟 非常感谢您的帮助。@Biswas，我无法用您提到的库实现这一点，但可以用另一个库实现这一点 如果日期时间选择器的样式/颜色代码与页面中已有的样式/颜色代码不同，则可能需要使用CSS 此库有一个属性“分钟=步骤”，您可以在其中设置每分钟需要的步骤数。我创建了一个plunker，用15分钟的步骤来演
非常感谢您的帮助。@Biswas，我无法用您提到的库实现这一点，但可以用另一个库实现这一点 如果日期时间选择器的样式/颜色代码与页面中已有的样式/颜色代码不同，则可能需要使用CSS 此库有一个属性“分钟=步骤”，您可以在其中设置每分钟需要的步骤数。我创建了一个plunker，用15分钟的步骤来演示这一点 注意：在这个库中只能通过时钟选择时间，我没有看到在输入框中输入时间的选项。您可以在上面的Github页面上进一步挖掘 HTML:
让我知道它是如何进行的。@Biswas，我不能用你提到的库实现这一点，但可以用另一个库实现这一点 如果日期时间选择器的样式/颜色代码与页面中已有的样式/颜色代码不同，则可能需要使用CSS 此库有一个属性“分钟=步骤”，您可以在其中设置每分钟需要的步骤数。我创建了一个plunker，用15分钟的步骤来演示这一点 注意：在这个库中只能通过时钟选择时间，我没有看到在输入框中输入时间的选项。您可以在上面的Github页面上进一步挖掘 HTML: 让我知道它是如何运行的。我在1.8.6中修复了它： 它将ngModel的初始输入集四舍五入到最近的有效步骤。分钟步长=1,5,10,15,30。。。默认步骤为5分钟。我在1.8.6中修复了它：
它将ngModel的初始输入集四舍五入到最近的有效步骤。分钟步长=1,5,10,15,30。。。默认步骤为5分钟。这实际上不是对您的问题的回答，但为什么不使用以下步骤？这实际上并不是你问题的答案，但你为什么不使用下面的答案呢？嗨，Vijay，在你的演示中，我尝试将时间设置为5:40，它设置为5:40，而它应该自动设置为5:45，我认为这个库中有一个bug。请详细说明。上面的plunker演示允许您选择时间，就我测试而言，我只能选择15分钟的步骤。让我知道测试您的场景的步骤。请再次测试，问题是库允许在15分钟内选择步骤，但在我们选择的任何步骤中保存值。@Biswas，时间问题是因为“time”变量的初始时间设置为当前时间。我认为你对此无能为力。如果用户通过选择器选择分钟，则仅将其设置为15分钟步长。当用户没有通过选择器选择分钟数并在此之前单击Ok时，就会出现此问题。如果用户未设置分钟数，则必须在ng-change（）函数中写入逻辑，将其转换为最接近的0,15,30,45。我已经在书中给出了一个简短的提纲。你可以从那里开始。@Biswas，你可以在哪里修复它？嗨，Vijay，在你的演示中，我试图将时间设置为5:40，它设置为5:40，而它应该自动设置为5:45，我认为这个库中有一个bug。请详细说明。上面的plunker演示允许您选择时间，就我测试而言，我只能选择15分钟的步骤。让我知道测试您的场景的步骤。请再次测试，问题是库允许在15分钟内选择步骤，但在我们选择的任何步骤中保存值。@Biswas，时间问题是因为“time”变量的初始时间设置为当前时间。我认为你对此无能为力。如果用户通过选择器选择分钟，则仅将其设置为15分钟步长。当用户没有通过选择器选择分钟并在该时间之前单击Ok时，问题就会发生。如果用户未设置分钟数，则必须在ng-change（）函数中写入逻辑，将其转换为最接近的0,15,30,45。我已经在书中给出了一个简短的提纲。您可以从那里开始。@Biswas，您可以在哪里修复它？我尝试使用索引html中的v1.8.6，在其中一个时间选择器中添加了minute steps=“15”，但我仍然存在这个问题。我将时间分钟数设置为25，时间指针指向30，这是正确的，但当我按下OK时，计时器选择器输入中的值保持为“25”，应该是30。我忘记分配舍入值。修正了我在索引html中尝试使用v1.8.6，在其中一个时间选择器中添加了minutesteps=“15”，但我仍然存在这个问题。我将时间分钟数设置为25，时间指针指向30，这是正确的，但当我按下OK时，计时器选择器输入中的值保持为“25”，应该是30。我忘记分配舍入值。固定在
A demo of this at:
https://codepen.io/alenaksu/details/eNzbrZ/
<!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>
(function() {
var module = angular.module("app", [
"ngMaterial",
"ngAnimate",
"ngAria",
"ngMaterialDatePicker"
]);
module.controller("MainCtrl", ['$scope', function($scope){
$scope.currentDate = new Date();
}]);
})();