Question

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

我创建了这个codepen来演示一个选择数字的简单滑块。 https://codepen.io/helpme/pen/meLWBL?#

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

但是，我想修改此代码，以便滑块选择日期而不是数字。日期实际上是月份日期，滑块滑动时，日期会按月更改。日期的格式为2004-06-01，2004-07-01，2004-08-01。

是否可以修改Angular Materials滑块以支持遵循格式的日期？如何修改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滑块选择日期而不是数字

1 个答案: