我想使用 Material Design (Angular) 组件设置一个 slider ，但可以使用日期而不仅仅是数字。
首先，这可能吗？
我的代码是:
<md-slider-container>
<md-slider ng-model="vm.slider" aria-label="nav Date" flex md-discrete></md-slider>
<md-input-container>
<input flex type="date" ng-model="vm.slider" aria-label="green" aria-controls="green-slider">
</md-input-container>
</md-slider-container>
默认情况下，输入类型设置为数字，但它不适用于日期、对象和 mt Controller 中包含某些日期的数组。
有什么想法吗？
最佳答案
请找到以下日期 slider 的工作演示:-
angular.module('example', ['ngAria', 'ngAnimate', 'ngMaterial']);
angular.module('example').controller('MainCtrl', function ($scope) {
//Set your min and max dates for slider as below;-
//Note: Please use date format as MM/dd/yyyy
$scope.minDate = "01/14/2016 12:00";
$scope.maxDate = "01/31/2017 15:30";
$scope.$watch('slider', function (value) {
if (value != undefined) {
var updatedDate = new Date($scope.minDate);
$scope.selectedDate = getFormattedDate(updatedDate.setTime(updatedDate.getTime() + (value*30 * 60 * 1000)));//Update date on set slider
}
})
function getFormattedDate(stDate) {
var sDate = new Date(stDate);
return sDate;
}
function dayDiff(firstDate, secondDate) {
var minDate = new Date(firstDate);
var maxDate = new Date(secondDate);
var timeDiff = Math.abs(maxDate.getTime() - minDate.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
return diffDays;
}
$scope.selectedDate = new Date($scope.minDate);
$scope.sliderRange = dayDiff($scope.minDate, $scope.maxDate);//This will give you range between start and end dates
});<!doctype html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.5/angular-material.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.5/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
</head>
<body ng-app="example" ng-controller="MainCtrl">
<md-slider-container style="display:inline-block;width:90%;float: left;">
<md-slider ng-model="slider" min="0" max="{{sliderRange}}" aria-label="nav Date" flex></md-slider>
<md-input-container>
<input flex type="text" value="{{selectedDate |date:'dd/MM/yyyy HH:mm'}}" aria-label="green" aria-controls="green-slider" style="width: 300px;">
</md-input-container>
</md-slider-container>
</body>
</html>关于angularjs - 如何设置带有日期的 Material 设计 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41221205/