Angularjs滑块选择日期而不是数字 [英] Angularjs slider to choose date instead of number

问题描述

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

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

.sliderdemoBasicUsage input[type="number"] {文本对齐:居中；}

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

是否可以修改 Angular Materials 滑块以支持遵循我的格式的日期?如何修改codepen以支持它?

解决方案

这里有我的解决方案: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-滑块><div flex="20" layout="" layout-align="center center"><input type="text" aria-label="red" aria-controls="red-slider" value="2008-{{month}}-1" disabled="true">

我将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;});

I would like to use Angular Materials slider to choose date.

I have created this codepen to demonstrate a simple slider that chooses a number. https://codepen.io/helpme/pen/meLWBL?#

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

However, I would like to modify this code such that the slider choose a date instead of a number. The date is actually a month date and as the slider slides, the date changes by the month. The date is of the format 2004-06-01, 2004-07-01, 2004-08-01.

Can the Angular Materials slider be modified to support date that follows my format? How can the codepen be modified to support it?

解决方案

Here you have my solution to what you are looking for: https://codepen.io/anon/pen/avGJGp?editors=101

HTML important part is here:

  <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>

I set min="1" and max="12" as the possible month range numbers that can be chosen, and the slider value is bound to $scope.month through ng-model="month".

Changed the input type to type="text" and I set it's value to the string "2008-{{month}}-1", where the year and day number always stay the same, but the month changes when you use the slider as it was bound to $scope.month.

The Angular controller would just stay this way:

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

这篇关于Angularjs滑块选择日期而不是数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！