CODEWITHSUNDEEP
angularjs
tonymx227
tonymx227

Reputation: 5451

Filter on dates with AngularJS

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

Upvotes: 0

Views: 43

Answers (2)

IggY
IggY

Reputation: 3125

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>

Upvotes: 2

ThibaudL
ThibaudL

Reputation: 1009

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

Upvotes: 1

Related Questions