Angularjs 滑块选择日期而不是数字

Question

我想使用 Angular 材料滑块来选择日期。

我创建此代码笔是为了演示一个选择数字的简单滑块。 https://codepen.io/helpme/pen/meLWBL?#

.sliderdemoBasicUsage input[type="number"] {
  text-align: center; }

不过，我想修改这段代码，让滑块选择日期而不是数字。日期实际上是一个月的日期，随着滑块的滑动，日期会按月变化。日期格式为 2004-06-01、2004-07-01、2004-08-01.

是否可以修改 Angular 材料滑块以支持符合我的格式的日期？如何修改codepen以支持它？

Answer 1

这里有我的解决方案，可以满足您的需求： https://codepen.io/anon/pen/avGJGp?editors=101

HTML重要部分在这里：

  <md-slider flex="" min="1" max="12" ng-model="month" aria-label="red" id="red-slider" class="">
  </md-slider>
  <div flex="20" layout="" layout-align="center center">
    <input type="text" aria-label="red" aria-controls="red-slider" value="2008-{{month}}-1" disabled="true">
  </div>

我将min="1"和max="12"设置为可以选择的可能月份范围数字，滑块值绑定到$scope.month到ng-model="month"。

将输入类型更改为 type="text"，并将其值设置为字符串 "2008-{{month}}-1"，其中年和日数字始终保持不变，但当您使用滑块时月份会发生变化它被绑定到 $scope.month。

Angular 控制器将保持这种状态：

angular.module('MyApp')
.controller('AppCtrl', function($scope) {
  $scope.month = 4;
});

Angularjs 滑块选择日期而不是数字

Angularjs slider to choose date instead of number

javascript

html

css

angularjs

angular-material