我正在使用 RZslider 实现日期和时间选择器。我将 RZslider 构建为时间选择器。所以现在 Rzslider 采用当前日期。但我想更改用户选择的日期。我正在分享我的演示示例：
var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
var startDate, endDate, startTime, endTime;
var currentDate = moment();
var timeData = getRange();
$scope.localTime = timeData.currentTime; // actually start of this hour
var arr = timeData.times.map(n => {
return {
value: n.value
//legend: n.value
};
});
$scope.slider = {
minValue: $scope.localTime.clone().subtract(4, "hours").format('DD MMM HH:mm'),
maxValue: $scope.localTime.clone().add(4, "hours").format('DD MMM HH:mm'),
options: {
showTicks: true,
stepsArray: arr,
draggableRange: true,
}
};
});
function getRange(currentDate) {
var arr = [];
var totalHourRange = 32;
var currentTime = moment(); // current date and time using Moment
// set current time to beginning of the hour
currentTime.minute(0);
// clone date and substract 1/2 total range to get start point
var tmpTime = currentTime.clone();
tmpTime.hour(0).subtract(4, 'hours');
// offset is the number of minutes from the current point
for (var i = -((6 * totalHourRange) / 2); i <= (6 * totalHourRange) / 2; i++) {
arr.push({value: tmpTime.format('DD MMM HH:mm'), offset: i * 10});
tmpTime.add(10, 'minutes');
}
return { times: arr, currentTime: currentTime, totalHourRange: totalHourRange };
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div ng-app="rzSliderDemo">
<div ng-controller="MainCtrl" class="wrapper">
<header>
<h2>AngularJS Touch Slider</h2>
</header>
<article>
<div class="form-group">
<label for="choos-birth" class="control-label">choose date:</label>
<div class="control">
<input id="choos-birth" class="form-control" type="date" ng-model="dateBirth" style="witdh:100px;">
</div>
</div>
<h4>Local time (beginning of the hour): <em>{{localTime.format('MMMM Do YYYY, h:mm a')}}</em></h4>
<br /> Model:
<input type="text" ng-model="slider.minValue" />
<input type="text" ng-model="slider.maxValue" />
<br />
<br />
<rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
</article>
</div>
</div>如果我选择 2 July 则滑块已更改图例。您可以在屏幕截图中看到。
我尝试了mean的放置$scope.dateBirth位置，但它没有显示在 html 页面中。我是角度的新手，但我阅读了两种方式绑定。我认为这与两种方式绑定有关。如果你有一些想法，请分享。var currentTime = moment();var currentTime = $scope.dateBirth;