Question

我想设置一个带有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控制器中有一些日期的数组。

有什么想法吗？

Answer 1

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

＆＃13;

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

});

＆＃13;

<!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>

＆＃13;

如何使用日期设置材质设计滑块

1 个答案: