Filter on dates with AngularJS

Question

I'd like to create a custom AngularJS filter using dates but in first my filter doesn't work...

app.filter('calculEndDate', function() {
  // here I want to add "duration" to the date
  // month or year according to "durationType"
  return function(date) {
    return date;
  }
});

<select ng-model="durationType">
  <option>month</option>
  <option>year</option>
</select>
<input type="number" ng-model="duration">
<label for="startDate">startDate</label>
<input type="text" ng-model="startDate">
<input type="text" ng-value="startDate | calculEndDate">

My main issue : endDate is null and I don't know how to proceed to apply my filter when startDate is not empty..

Please let me know if my answer solved your problem by accepting it or commenting it if there is a problem :) — IggY
– IggY, Commented Oct 30, 2015 at 11:51

IggY · Accepted Answer · 2015-10-30 11:09:00Z

var app = angular.module("App", []);
app.filter('calculEndDate', function() {
  // here I want to add "duration" to the date
  // month or year according to "durationType"
  return function(date, duration, duration_type) {
    var date = new Date(date);
    if (duration && duration_type === "month")
      date.setMonth(date.getMonth() + duration);
    if (duration && duration_type === "year")
      date.setFullYear(date.getFullYear() + duration )
    return date;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App">
<select ng-model="durationType">
  <option>month</option>
  <option>year</option>
</select>
<input type="number" ng-model="duration">
<label for="startDate">startDate</label>
<input type="text" ng-model="startDate">
<input type="text" ng-value="startDate | calculEndDate: duration:durationType">
{{startDate | calculEndDate: duration:durationType}}
  </body>

ThibaudL · Accepted Answer · 2015-10-30 11:05:36Z

1

Add parameters to your filter :

app.filter('calculEndDate', function() {
      // here I want to add "duration" to the date
      // month or year according to "durationType"
      return function(date,duration, durationType) {
            //your code managing duration and durationType
      }
});


<select ng-model="durationType">
      <option>month</option>
      <option>year</option>
</select>
<input type="number" ng-model="duration">
<label for="startDate">startDate</label>
<input type="text" ng-model="startDate">
<input type="text" ng-value="startDate | calculEndDate : duration : durationType">

answered Oct 30, 2015 at 11:05

ThibaudL

1,0099 silver badges16 bronze badges

Collectives™ on Stack Overflow

Filter on dates with AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related