1. 首页
  2. 问答
  3. 集分钟步骤

集分钟步骤

2017-08-24 98 views
0

我使用这个著名的材料的DateTimePicker库：https://github.com/alenaksu/mdPickers （我找不到虽然文档）集分钟步骤

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

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

任何帮助表示赞赏。

来源

2017-08-24 Biswas Khayargoli

+0

这实际上不是你的问题的答案，但你为什么不使用下面的问题？ https://dalelotts.github.io/angular-bootstrap-datetimepicker/ – quirimmo

回答

1

我固定它在1.8.6：

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

它将圆初始输入由ngModel设置为最接近的有效步骤。分步= 1，5，10，15，30 ...默认步骤为5分钟。

来源

2017-09-04 02:43:56 Hexadecy

+1

我试图在索引html v1.8.6我添加分钟步骤=“15”的时间选择器之一，但我仍然有问题。我将时间分钟设置为25，时间指针指向30，这是正确的，但是当我按下OK时，时间选择器输入中的值保持为“25”，应该是30. –

+1

我忘了分配四舍五入的值。修正在https://github.com/beenote/angular-material-datetimepicker/releases/tag/v1.8.7 – Hexadecy

+1

感谢它的工作！好样的！ –

2

@Biswas，我没有能够与你提到的图书馆达成这一目标，但能够与另一图书馆一起实现这一目标。

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

如果款式/颜色代码为日期时间选择器从你已经在你的网页不同，你可能不得不玩的CSS。

此库有一个属性“分钟=步骤”，您可以在其中设置分钟需要的步数。我创造了一个蹲点，用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/[email protected]/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/[email protected]/dist/angular-material-datetimepicker.min.js"></script> 
<!--<script src="https://unpkg.com/[email protected]/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(); 

    }]); 
})();

让我知道如何去。

来源

2017-08-24 18:07:12

+1

嗨Vijay，在你的演示中，我试图设置时间在5:40，它设置为5:40，而它应该已设置为5:45自动，我认为这个库有一个bug。 –

+1

请详细说明。上面的plunker演示允许您选择时间，并且据我测试，我只能以15分钟的步骤进行选择。让我知道测试您的方案的步骤。 –

+1

请再试一次，事情是图书馆允许选择15分钟的步骤，但在我们选择的任何东西中保存价值。 –

相关问题

 相关问题