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

问题描述

我想用Angular材质滑块选择日期。

我已经创建了这个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以支持它？

解决方案

在这里，您可以找到我想要的解决方案：
https://codepen.io/anon/pen/avGJGp?editors=101

HTML 重要部分在这里：

 < md-slider flex =min =1max =12ng-model =montharia-label =redid =red-sliderclass =  > 
< / md-slider> 
< div flex =20layout =layout-align =center center> 
< input type =textaria-label =redaria-controls =red-slidervalue =2008  -  {{month}}  -  1disabled =true> 
< / div> 
  

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


将输入类型更改为 ng-model =month。

> type =text，我将它的值设置为字符串2008 - {{month}} - 1，其中year和日数始终保持不变，但当您使用滑块时，月份会发生变化，因为它被绑定到 $ scope.month 。

$ b $ Angular 控制器会保持这种状态：

< pre $ 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屋！