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コントローラ内のいくつかの日付の配列での作業ではないです。
アイデア？
日スライダのワーキングデモの下に見つけてください： -
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>それは私がいくつかのバグに適応する必要があるようだが、それは大丈夫です:)ありがとう – Florian
あなたは歓迎です:) –
あなたは日時範囲スライダのための修正を提案できますか？ –
このリンクはあなたを助けるかもしれhttp://stackoverflow.com/questions/33382052/angularjs-slider-to-choose数字の代わりに –
私はすでにこれを見ましたが、それは月のためだけです、私は完全な日付が必要です – Florian
私はあなたが欲しいものを達成することができると思います。ありがとう!! –