如何使用日期设置材料设计滑块答案

【问题标题】：how to set up material design slider with date如何使用日期设置材料设计滑块
【发布时间】：2017-05-04 10:09:13
【问题描述】：

我想使用 Material Design (Angular) 组件设置一个滑块，但使用日期而不是数字。

首先，有可能吗？

我的代码是：

<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 控制器中的日期、对象和带有某个日期的数组。

有什么想法吗？

【问题讨论】：

此链接可能对您有所帮助stackoverflow.com/questions/33382052/…
我已经看过了，但只是一个月，我需要完整的日期
请检查我想我能够实现你想要的答案。谢谢！！

标签： angularjs datepicker material-design angular-material

【解决方案1】：

请在下面找到日期滑块的工作演示：-

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>

【讨论】：

它似乎工作我必须适应一些错误但没关系:) 谢谢
你能建议修改日期时间范围滑块吗？
@AnkurAkvaliya 很抱歉回复晚了，我已根据您的建议修改了解决方案。