I want to create a year selection dropdown. year must start from this year upto next 7 years .
I have tried
var year = new Date().getFullYear();
var range = [];
range.push(year);
for (var i = 1; i < 7; i++) {
range.push(year + i);
}
$scope.years = range;
<select class="form-control" ng-options="year for year in years" name="expiryMonth" ng-model="expiryMonth" required>'
But this creates a html ,
<option label="2016" value="number:2016">2016</option>
this creates a required year dropdown But i want Value to be last two digits of label
Also, my first option should be like
<option value="">select month</option>
I want to create a year selection dropdown. year must start from this year upto next 7 years .
I have tried
var year = new Date().getFullYear();
var range = [];
range.push(year);
for (var i = 1; i < 7; i++) {
range.push(year + i);
}
$scope.years = range;
<select class="form-control" ng-options="year for year in years" name="expiryMonth" ng-model="expiryMonth" required>'
But this creates a html ,
<option label="2016" value="number:2016">2016</option>
this creates a required year dropdown But i want Value to be last two digits of label
Also, my first option should be like
<option value="">select month</option>
- Don't understand. Value of your model is the same as label. See this Plunker plnkr.co/edit/ygxpfIlheIhGE8MvUIIR?p=preview – gauss Commented Nov 23, 2016 at 10:12
7 Answers
Reset to default 7
angular.module('app', [])
.controller("Ctrl",
function contactListCtrl($scope) {
var year = new Date().getFullYear();
var range = [];
range.push(year);
for (var i = 1; i < 7; i++) {
range.push(year + i);
}
$scope.years = range;
});<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="[email protected]" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<select class="form-control" ng-model="expiryMonth" required>
<option>Select month</option>
<option ng-repeat="year in years">{{year}}</option>
</select>
</body>
</html>This will give you a useful dynamic year range.
let years: number[] = [];
let currentYear: number = new Date().getFullYear();
for(let i = (currentYear - 7); i < (currentYear + 7); i++) {
years.push(i);
}
If you want that value will be only last two digits of label you can extend your years object like:
var year = new Date().getFullYear();
var range = [];
for (var i = 0; i < 7; i++) {
range.push({
label: year + i,
value: parseInt(String(year + i).slice(2, 4))
});
}
$scope.years = range;
And ng-options like:
ng-options="year.value as year.label for year in years"
See this Plunker
Consider using ng-repeat to create your <option>
<select class="form-control" name="expiryMonth" ng-model="expiryMonth" required>
<option value="">select month</option>
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
For dates and times in angular i often use:
'uib-datepicker'
More information: https://angular-ui.github.io/bootstrap/
In this directive you can use 'min-date'
<input type="text" starting-day="0" uib-datepicker="{{format}}" ng-model="vm.dateFrom" is-open="true" min-date="vm.minDate" max-date="vm.dateTo" />
And in your controller:
vm.minDate = yourFunctionToDate()
I made you a fiddle that you can find here
Basically, use the expression track by to give the value you want to your options.
Try this instead:
<select ng-model="expiryMonth">
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>