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

Posted 2023-03-05

【中文标题】Angularjs滑块选择日期而不是数字

【英文标题】：Angularjs slider to choose date instead of number

【发布时间】：2016-01-27 16:41:13

【问题描述】：

我想使用 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 材质滑块以支持遵循我的格式的日期？如何修改 codepen 以支持它？

【参考方案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"，其中年和日数始终保持不变，但是当您使用绑定到@987654330 的滑块时，月份会发生变化@。

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

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

【讨论】：

@user768421 干杯！我编辑了这篇文章，提供了一些关于实施的更详细信息。