Angularjs slider to choose date instead of number

Question

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?

Answer 1

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