1. 首頁
  2. 問答
  3. 集分鐘步驟

集分鐘步驟

2017-08-24 170 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分鐘的步驟，但在我們選擇的任何東西中保存價值。 –

相關問題

 相關問題